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

happyxp

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

% @! A/ [9 |" T! u

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

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

- Y5 f: _- @" C, `1 n+ B. q

不

6 g x& ]; a' ?+ n$ j! g+ i* p. K

自动

换行

4 l8 d- S' _1 n2 e0 k. {

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

7 e% @6 Z: y; S4 o" L4 a

 

以下是display的用法和定义：

8 V) N0 f& N+ M' C7 a" J

 

定义和用法

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

说明

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

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

) |; v2 o7 M* [. u' @$ E4 H# a0 s5 ^9 m# W! [; ] j* C# k! @

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

实例

使段落生出行内框：

p.inline
% h' a: P3 }  q/ v  {
& X. N9 I% y( u+ u% p% B  display:inline;
  }

2 l1 z' a: q( p- P. W7 U, }

浏览器支持

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

; g; E b) w4 X8 B! L9 z3 H* t

- R' X3 p/ l5 _7 s% u n+ ?* i; N

可能的值

8 x9 \0 l0 q8 u- G* _- T p1 \( A- h, Q9 ~( ~! @' I- z9 n' k, F- H& q! W1 }' n: O M3 ]+ v; V& ]0 v- f4 R. q) _5 U( `0 }, M* C, |6 ^4 q. M$ Q6 Z9 ?; _7 U+ w* n8 o" U% R: G: z$ m. I. Z9 n2 k) |2 K4 g7 C' n+ A0 F" j: E* P, e3 Q0 B% {3 x0 ]1 h; a1 f3 A" I) ?, h" B$ o9 U! E- G7 |9 L" O8 J/ p* u" g$ I2 V3 f# G* e+ T7 L% ^& C5 ^% D, z1 ~: {: s! S3 t$ p1 ^: O- ]6 `1 Z/ H( H1 y8 h: \: B1 H1 M2 D7 R1 q& G$ B* w( `7 s5 {9 L: a& Y0 n/ c; F& U$ Y+ Q& {$ q8 D, s! V" C+ L6 [: z$ i! B/ Z! q% m2 h e3 F1 _) @7 V& G9 ?, z8 G- x3 n$ H5 }8 y# |$ w6 @3 j: c$ ^, X+ L3 c* m8 e) @& V+ Q0 \/ D! T5 \* L- q# Z: j0 U* G r; t. n) d4 w4 l" _. O. {$ ?2 j: H/ y R- h( Q& C$ H% v8 Z8 L( v9 ~/ ]4 g7 v% f, y* K0 ]5 M% L: }* M, \$ F9 P) I/ O; S, S5 U4 p. `/ X" B4 K J3 r; G! Y' l n! Z! f8 O7 \3 Q

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