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

happyxp

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

" R+ ]; S% I+ Q# B5 e" K6 p

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

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

不

! Z7 z1 _( O" B2 H; i( r

自动

5 y( a7 w9 N/ ?% B! c" h

换行

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

2 ?" m: r" `1 M+ q" Y0 Z% `

 

以下是display的用法和定义：

0 g0 w) J% |% d

 

5 x6 e5 C6 A8 Y& B: A& h1 A1 e

定义和用法

: V9 e& i( R$ y5 G! X

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

说明

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

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

: v& z5 ^5 b% U: \9 b0 P/ l5 @ T: x, ^) t/ ?0 s. t' D' d+ @5 m* C) a' H* e, `3 t% \' _$ Y( W1 ?& S7 u3 i6 t$ T- E$ d2 V5 g% L0 g6 ]+ P

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

实例

使段落生出行内框：

p.inline
* F- m5 e& \4 E& a3 o( Y  {
8 s) i$ v4 x: R, [. X  display:inline;
) V9 F& f  g  f: K" I  }

+ Q, C3 e* B2 {

浏览器支持

9 z2 ^& A% `7 V! _/ `

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

+ ~( F+ E0 [* |# l* W

8 r8 X8 O% u. ?$ L, F$ t' G, e

可能的值

: q9 K* Y' I- s2 f! y0 _$ W: F/ X% r) Z( v$ k- D; c% `# v2 A" g- z' c1 A5 f& j) Q/ u( D( O' c; |7 u+ }* e& V6 d5 O d* H" K( e8 i6 s# [" o- I, w, K @% p: s1 H" d+ ~) | R' ]' J9 ~$ C, r B: }6 L0 H g. s! b0 k5 {. n1 k: R2 J# Z% H- Y+ ^; ^. ?: h9 z9 [& ^0 W5 X' C# B# h* h6 ? ]: _! ~) O6 k! G$ y- y, }. H5 _ d! Y: ^7 T6 N, K6 Q* m, N- m/ P- W. q0 k _1 z R5 W }: V5 ]/ k S# i/ M* C2 [# j7 v ]8 ~! K5 H8 v: ^4 X; G2 Q7 y, Q/ ^8 N5 l+ W$ D2 ]; h- R& H( _/ p K6 `5 [$ q1 \8 o# Q- J8 _1 S7 M1 ~# b6 O) R2 h" L

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