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

happyxp

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

I. A3 _' J( E' Z, ]

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

7 a; X9 {: P+ ~! T2 ~

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

不

自动

换行

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

 

以下是display的用法和定义：

+ D* {) Y) Y8 p. c1 k& f

 

定义和用法

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

说明

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

! w* s" l1 B6 y, q

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

: f( c- s" V8 z, [2 w. s2 S/ D- x w" X7 H+ W6 x9 L! ~- `# @+ z% _+ V/ g2 p$ k* N6 w) n5 k' i4 G9 I+ c! L' i, K5 F7 N8 o9 f {8 k/ X1 F! t9 _: t& L4 P) _' [: l/ Y4 |: C" o% Q+ T; t9 u. G& \

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

{- R# V" K( H' D# W

实例

使段落生出行内框：

p.inline
8 V$ v% `' H; _  {
  display:inline;
  }

5 U! o- V) f8 C1 A. z2 `

浏览器支持

所有主流浏览器都支持 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"。

2 `: c8 }4 \5 m& b8 K

0 V& ? ~/ C- ?/ G+ ?

可能的值

/ v0 o$ U% x5 D, R t$ o3 R% h2 r5 w8 k' K( a' L. [9 i1 q) n3 X% N8 l- b+ \7 ^' [- j3 D- e& a6 _; v8 ]0 K$ M, A# h+ U+ O' J9 e+ T9 q( H4 X9 J( T+ ^0 k+ ]2 W3 Q9 f2 v2 [4 A) {# t" u& d& Z8 G0 k0 o1 G" L9 |0 A* `2 i6 Y. ]9 E0 l0 f$ \" T& N, O4 j( k/ o/ @7 m+ ^% l V4 M& C# Z: ^' d2 b& e0 b1 x! @! C! u" z/ q" d! F" p7 \0 B) w& ]# ~+ L) B5 z0 A+ Q6 h$ q! V/ z! S: W$ i5 Q/ W: N" _' h J" O. ?& d$ o5 ^7 i9 k, {2 h3 a) s5 c) U; B* B) t6 C* F: m: T( x; d8 Y0 i3 V6 O$ T7 i& [- B- e* k8 x- i/ j9 A' E. }7 s0 u1 c* y! C8 n% w' Q2 u8 G; E2 a( a% d/ \' T+ B8 I, j2 w+ R* O7 i/ H1 T q& a* v) q* x7 U: A$ g' I# j- H" w+ w! t/ I. a8 g% ~+ z8 G+ G; z; |/ Q% q6 N$ U% L: h( q; c, y2 F. E$ p' r; d# I/ d) I: \6 P/ S2 z" P+ h8 R+ k4 l4 \/ ^+ u: I3 |& @* F' z8 E& @( k- ^6 i4 r, L% S' @0 e, f3 I: V4 d$ c. T7 q4 v! T& h5 R3 O0 Y- }8 p. F8 y- B/ V3 {+ m5 \

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