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

happyxp

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

; u7 y( q) d8 i

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

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

& g7 z' H) F n+ K$ L$ V

不

自动

换行

+ q# _5 A; J% Y$ H8 G* X

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

! f/ U; a: L! `; I4 M' ^) s9 F6 g

 

6 `, G8 y3 [0 u, F% M% _

以下是display的用法和定义：

; m9 S: b6 T8 c8 s1 h5 s

 

, F3 C- Z6 F1 D2 O8 R1 k

定义和用法

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

9 t9 r+ T( j; b+ Y

说明

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

$ P/ L3 }8 U8 C# X8 N! n

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

9 A0 g; {0 v7 p2 q3 y8 z' r9 t$ }( B/ H4 l5 b2 _, F" Q: a% A/ {- h& d" l5 A/ g6 l: a& k8 ?( d7 {+ t( Q0 h. _+ Q' ?1 F

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

( m' x" B" r5 F( n7 D

实例

使段落生出行内框：

p.inline
: e; l1 Z7 ?# J- j4 g  {
  display:inline;
  }

2 k) a& d* T- u5 H; M2 h' d K

( \/ U# A% h% x6 R: y' j

浏览器支持

0 X) x/ ~$ s1 e* [

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

可能的值

% b- u W2 {1 {- u/ @- W1 W% k4 {6 J( a! \+ o2 z+ H$ R. U6 |3 ~4 ]" `, t; {, s% b% e* Y+ a% h/ w2 S" M! N! {) i( F9 w9 H. b E# h, p; ]- `. y: z, c/ L# N: @# u3 q! {! M5 e" |6 b. r3 Y, y8 P1 A9 }' a: Q: J! z' E# f- Q- @: y* K" I. {# j: p6 s# L: Y4 ~9 Z! ]8 {4 ]+ G! `8 X3 w! }$ ~4 I. K S! I9 o4 d: u. P/ q. B! ?9 [- q$ u1 r$ ~* }8 \7 |0 U: [/ u+ `5 y, f& a' |/ V i/ h3 ?7 f' m# q7 A, d2 l2 z* _) E# {6 E8 ~; y7 z% k1 ~9 y1 u/ W' v& Q; f! |% m* t& ]" |! {& t* v! y( @/ E; _. r h' B: U: A, [5 v) T- U& I& ]) b2 F8 Z4 e" c1 E$ C: M" b8 B$ k) q( L, j7 u% H/ Q: J8 H) E4 z6 ~. M+ H5 H1 ]7 b; q. J" _. V. M1 m5 E# ~9 J! W" e$ @/ R7 W' V$ @; X" w, V# X8 j# f! p: X+ z9 r6 s4 B% s$ A# ?0 W5 \2 o9 K) c6 t4 S3 n' V

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