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

happyxp

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

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

) ]& q, u) }) ~ b Y' ~- F

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

不

* Z) L/ P% P3 D

自动

换行

2 y" t3 N) ~; n

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

 

6 G* p( x) P3 R& l; ]

以下是display的用法和定义：

 

" T7 {" A4 U- D H5 X

3 O& U6 S5 Y% p1 h* J! a0 F& a/ g

定义和用法

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

4 d. z+ f) @1 T1 ?; Z

说明

4 i6 n! e" R3 Q7 v- E

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

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

1 f5 H6 t( R6 J5 c& v1 V' @( D( S5 A( J' n( Y+ {/ w2 K# G; X5 Z/ O& y7 a5 o

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

5 Z# Y& e0 x' B" |0 S

实例

使段落生出行内框：

p.inline
  {
  display:inline;
" g- m, Q2 Y- M* e8 b& ?  }

: A( v0 I+ z* \. i7 s: Y1 W. d, c

浏览器支持

( _" J" s0 K9 p Y6 q2 M9 w

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

4 k+ w+ n+ v% F+ D$ V( t" a

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

7 b9 I( v- z9 u) b

可能的值

! m) N8 q* ^+ r! K5 A7 h5 h* U0 K3 V0 H; m) z# Y% {( [$ z7 Q( j1 O1 q& m9 f. J8 v( p6 F5 D% t/ G% ?& s& F" X" Q" a! b5 X: }( h5 v+ E5 H! w' T6 c/ A N" @$ {$ q% F3 ?% v3 M0 [0 ]: |3 B% b+ J& ^$ \: \+ \. K3 d) D/ p( ?% l$ b0 O1 Y$ j% \! {: ?# ] f. x+ L9 H+ { r: c' L& m6 k7 b2 g6 g' M: X" y q- ?2 ?* Z9 h; T) j. r* X4 v4 @" r9 j/ T0 g# Y/ X2 N- u! v% m$ h' U4 P0 s1 u9 N" z6 g- y) ~: K/ J. V2 B, X% _6 B) M8 x3 L* V' \1 D, k8 n( v! Q8 I. ? X1 F; h2 U" a9 k. |+ K6 b4 C' h. l' l3 S9 |5 M2 w2 Z$ ^( d5 Q3 c2 \* m1 L- C; c, I7 c+ G( s$ ]5 U1 q* {: G, P5 ]7 O. z; s# B, v/ |% c" f9 |- n, y2 N- ~9 B& ^" }# e, u% o: Y: U- y3 y3 A. y! q* N9 r: i8 a M& r( e- w

值	描述
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 属性的值。