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

happyxp

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

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

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

3 l; {$ m3 s* b. y4 u

不

( |# b& k" a3 v6 W

自动

换行

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

0 q6 [+ i: Q, e0 \% h% ?# p1 ?

 

以下是display的用法和定义：

 

/ S$ H6 m6 [; e% w; B2 S5 k

定义和用法

, C& q4 O9 X9 ?; L ?$ d

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

6 I& I: O/ [8 B \3 W

说明

8 ]! W& h: L2 s3 v' T/ G

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

( G0 ?" {$ B* Y! \+ Z6 w

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

9 Q4 q% _' F, O3 U! ^1 D5 i0 F3 v U6 Y2 B; l4 g3 z/ V; Y8 [5 ~) s+ F' o: l; v3 W: Z& d8 J! J& X; g$ c) k8 r$ V9 m. \ a4 v( W* T/ {* B6 s: L! q) c( |9 x& E v6 k5 |2 |, y5 [- U7 \# X2 H2 R1 F# ?( y# B' j" A3 ^- ` ?( k. a6 Z- }& T

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

, a" A v' ^& a2 l4 F4 ]# U/ ^

4 K& y. I+ w) `4 ~% q& T

实例

使段落生出行内框：

p.inline
  a8 _; B0 f- x  {
  display:inline;
  }

' l7 E5 v) m, d" v0 x

浏览器支持

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

, _! J9 k9 F7 k( J) p3 H! O/ a

9 D- F+ w) k( B, b7 h! [7 K% Z

可能的值

' ^0 H+ }5 }( t4 }3 Z' U7 D8 \& e7 q( S2 Y& M# y8 D b/ U C x! q8 Q- N* V7 f" Y6 n) i, Z" |# V( W- Z( `9 |/ K$ P+ f9 o4 E: C6 L3 k8 w: D+ x. z5 E* b$ {8 H" k/ k2 U- P4 ]8 h1 [: ?$ E3 g+ m- g4 w% [2 O; x2 l# Q; @: T0 `1 x, [5 ?8 u& O; [- m+ |/ [) Q; E4 U( P1 w, E7 K9 ?! D% g8 U4 |2 M* U8 h% M3 o* R/ [/ ?) }' i1 W* Y) s& G& ?# X% P3 G+ l! T. L. ?) N. M8 C& N/ W; Y \' g' R; r/ Z" |; v' c- c) s0 o# J) i) X" u& W4 f- |) \6 K7 G% P! j# F1 o% o, X9 t$ w7 j* E5 [: }3 t0 L, I9 o* q) j" h( `7 C2 ?( N7 g" R3 u" N0 T7 f* S% \ X' d# ]9 S7 ^! t9 Z9 C# H/ Q. }8 T( b/ y3 @8 }1 [# M1 Q7 k; K3 o. o. g- L5 ?% t5 _& u x7 O% H8 \% M* o. e. d. a# X/ O

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