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

happyxp

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

5 b# |/ R, B9 l+ G

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

! u' x o8 X+ ~6 v* I

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

- | h6 d* j% j! K4 v: a" J, k

不

自动

换行

% \3 @9 F- y. O' U1 R9 N e* N# j

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

 

以下是display的用法和定义：

 

" a s) p$ k: Z- A

定义和用法

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

说明

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

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

; J/ n& v+ [* u( P$ H1 V" X4 w% w" \6 E* I" M4 b$ h/ ?8 K5 a6 q( B8 q$ @$ Q0 ]& e& J A6 ` U6 m( i" T- ]6 ?1 W% F4 I S. \4 s2 u4 d, j9 x T' c5 q; M. q% X- S' S; w& y. q0 s8 c9 E* K+ D* [5 x7 }0 K {8 v. n" y: a6 |& [8 T7 }# ]1 K/ ?: n/ p, L c6 X/ u( @! t

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

实例

使段落生出行内框：

p.inline
. x% N8 ?( X  ?6 C- ?! v" o; b$ [  {
) O! _! }8 _/ ]5 [4 L" H  display:inline;
  }

4 ]; h2 ^, m3 u/ K) m* r8 R

浏览器支持

% u3 \+ h4 ~2 T9 c* T, P, ~, T" i* w

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

) i+ C; \ q" d4 X

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

, v; S- M/ F1 h# |' j6 [5 ~6 f

可能的值

- h2 F$ f4 \2 f9 ]4 K! R1 G$ @# B0 C: \2 z( O# F9 c6 D V) t0 ?: L: l- Z) @* c m/ o/ }1 P/ ]- n- s9 j" M3 P9 }& A) Y+ L) C5 |+ L6 d0 y6 {7 U4 e# [- k9 `+ f$ W% q; _3 t% u7 i, j- }, h# w+ s7 n n( p! [8 P) r/ _; S& E6 U! q' i/ a; {& ?$ R& ~9 p" r2 k$ i) v! ]/ C7 V+ w; {( L) w* m$ o2 B/ f8 N6 `% a' R E" T, y, A/ I. h: e+ ^. x5 |0 T0 D- \! `9 g: m0 \0 ^( U" q7 ~, T+ e+ R9 t/ b$ z8 N8 M) q8 ?1 i. ` R- d* t/ e" o# Z5 E: R/ k' J6 o- y# g) m" H Z1 h7 \& @' J4 K& U6 m1 Y. B# V- o+ v" i9 j0 ^, j S, h2 g+ g% d3 ], b Z/ B% O0 h7 k4 K7 \+ R) O: z; f9 f, B4 z! W% ]* ^: x! l) h' t: A' N% |2 }7 D6 B2 c3 k/ P, Z+ m' _3 q G8 ^7 B( }+ F3 w3 R, }$ y. S4 h- W) E' j3 b! e& D5 g! \) S( q6 K3 U c) @9 W4 A, q% F9 {! Q; c/ e7 _* \! O# x* F

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