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

happyxp

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

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

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

不

+ a! \$ e5 f4 [" P8 c

自动

+ f8 u7 g+ {. V% o" K& X) |4 y, g/ o, a+ A

换行

/ z* J( F) d, f1 V

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

 

7 V& r: ~$ B2 E; c% p: Q% G& I+ H; m- P

以下是display的用法和定义：

2 y F) i$ d& ]0 U( e' w) A, V

 

6 z' Z& v! Y7 H' x2 p3 Q+ ~- L9 j

定义和用法

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

说明

+ ]; U8 b T, ~ @; d. G6 B

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

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

. b! z' X. v1 {3 @/ Z5 K8 R, T. e& g5 m; Q/ h: p/ d* X* D' y6 u8 p; O# h4 k. k0 ~, Y- D1 w* W' {& Z+ B2 R; b3 N& I3 k* q+ V: W' H8 P6 v6 n8 ^" \* p! m7 C" X1 K; Y6 u$ U; @4 Y2 B {$ @: U/ n

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

实例

使段落生出行内框：

p.inline
; @% E8 ~8 J: ^8 v  {
# m6 K( h& A4 y4 {  display:inline;
) n0 D1 j% J" Z: l2 a  }

0 B1 f8 n- Z0 \% z2 n

8 B2 \$ ?6 f1 y8 D0 R

浏览器支持

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

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

% I! |3 A. {0 g# s8 U8 Z1 V6 I# O

- H! H" X( \4 _" [: X% @* d- P

可能的值

$ Q* ]3 Q7 o/ Y- u5 X+ n* l, L$ N. k( Y5 W Y) h, {* u* q% T# p n4 L# Q3 d" O9 m5 t5 |5 [4 s4 F$ r) }5 V. T u5 T# r- R0 b+ \# G+ O0 Y4 `' ^( r; R! C n2 `4 l# e. H$ X( b5 v5 r" N. K. H z6 a' _4 U2 P% _) Y8 w+ f3 T' W+ I# e& W: w7 o0 z2 v! i) C" \# Q7 k8 \- g/ b8 P- g" ^5 q6 M6 m _* n1 z1 y9 m1 `* r( e$ W- p: g: ^3 M8 q3 Z* o- t6 o: z% r) {5 L( f0 _0 x1 k. F4 i1 t( Y- y4 g" b1 R6 M2 P. h+ V6 f2 d- k1 D' \# r5 \7 |: ]) d2 M$ @7 V3 j, j, Z0 Q; }: v# C+ G7 A2 L, G2 G& f, \7 M+ u) j0 `! V, O& o, q" d& c& E8 G! m+ x4 [/ z+ C0 o* F6 u/ \6 p1 U% B# s3 ?: f9 n$ {& N+ i: N0 S: P9 M" n) I4 p9 p! [' W" V0 X( z" I$ H! W4 y5 @2 A0 g$ g5 m5 i m3 U1 [ B+ x: Q( z P1 q# y+ N) p2 y7 C# ?% a1 _ I! c' g& j1 D' x# i7 {/ r( p+ @5 i5 K* T* i0 `; L: I5 t2 ?6 b) W1 L' w* d# U9 N& U3 m' H4 H* Z8 }+ M# n3 L! Q/ m$ i6 W% g g) @/ _

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