如何使h1标签不自动换行 [复制链接]

happyxp

  今天做网页的时候刚发现的问题，在一句话中加入h1标签或者h2、h3等，如下：

  不<h1>自动</h1>换行

  显示的时候会是这个样子：

不

自动

) D& Z, \# S- o0 H6 o. e

换行

会在h1标签处分为三行，如何让他不分为三行呢，只需在css中定义h1{display:inline;}然后就OK了。

 

以下是display的用法和定义：

! L8 N) Q( k! k# u

 

定义和用法

9 s' i k4 X( E( j0 u# L# Q! S2 |

display 属性规定元素应该生成的框的类型。

说明

" `0 q; ]2 [, c9 W2 e0 t% E

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。

, P3 V1 j7 F4 p/ C. C8 F/ Y+ s5 Y: ^0 v+ r" ~# V N; o( }1 Q$ s% ]9 S! a- U. l, T( Y$ c8 T. \# n* G" |& @2 m0 E p1 e$ z" K# m6 O# ]) P: w; K7 @+ L' S2 M1 M' T4 M

默认值：	inline
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.display="inline"

; {+ M @! n6 R, n6 I0 u% b

实例

使段落生出行内框：

p.inline
* u& a% h4 ]% X  D1 \- R7 g2 t/ r  {
  display:inline;
* H( X! F* F! T) a: W6 ~; u5 V  }

# R' a& f) G4 Y0 ~% [

浏览器支持

所有主流浏览器都支持 display 属性。

' d" q% d5 H4 C5 h& _

注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

: H3 X: `+ N4 s$ L2 F# n+ X

可能的值

$ |" V$ o! q$ l; r$ ]- T& k a( ~0 G' I* P n+ Y S7 r# @5 i3 Y$ E1 ?! ?9 y: G9 h+ u5 L/ h" T# H# p/ U3 k2 C% o$ c6 {2 l/ _, u4 g& a0 F2 w, _5 ~0 z; H* G- m4 z1 F2 S+ u* u4 O( X' [6 q. Q' C ~+ V0 ^. n b `' ]3 i6 ?1 G9 `3 ~* o1 j ]8 s O7 s' ]/ Y4 D6 F* R$ ?2 O7 j1 G/ ~) ~0 T8 p( P3 d! Z6 c/ Q7 [, o9 ?- \; |# c/ j- W( C: R x% K8 x( ~' C0 N) G% K b! G. Q! }! [; N7 J) I6 t$ \+ Z4 x7 G+ P. k% H* s& y% T& Z* r( R' X8 f1 B- B2 ?# H& q3 o! |6 D2 a+ B% z/ M2 [' H% S" e }4 Q0 J0 t3 @3 w2 D Z1 r3 u6 G$ N$ ]% f* Q" @9 n$ `/ ?2 S; w% q- O- r1 n1 |' N* x* M5 g5 _, {; p7 f/ V5 y3 v# ~) C. _$ \1 |5 G! Q7 `* q% P- n4 S2 Z: H$ y; S% x7 [* N' G+ G+ \! o( q( p: n' t+ j# E: H$ C" q3 p {- l; i/ ~+ y% B3 a0 Y6 _* z, t3 Q4 B6 k& a9 _" H1 p. {0 ^

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。