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

happyxp

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

% A" m! l% o4 F b+ t* [/ Z

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

& G1 b& l7 D! Y) k; F

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

不

( n s0 a- j# L4 d' r- b2 D0 l

自动

换行

- v4 n9 X% M: c; v

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

 

以下是display的用法和定义：

 

, f: U, V) H4 S" \7 q; v3 E

定义和用法

) {0 N: \; U; u* h

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

说明

# U9 R: W6 ~2 n" f) t+ ^8 k

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

" K: `* q9 L$ u/ s

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

4 Y9 w' u; b; N" I) E* m0 }- p3 K% \' p! o1 C) Y) ` W( b) B+ |3 S4 t6 u) i3 Y+ E7 t8 O% Y2 v8 q6 f' }; D$ I/ g& m% K1 K- A; D8 E9 H" i, t2 q+ Q* U5 I/ `: K' B0 R8 W9 a0 N

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

. H$ W; k+ R1 S* u3 P+ l. d" R+ n) `

. N) W" s6 ]" G9 ^

实例

r8 |% ?) Z( w# F$ ^

使段落生出行内框：

p.inline
  {
/ o" T+ c2 K7 C# i; [& y  display:inline;
' [$ v$ \9 k* F& C, h  }

! ^) g9 ~ S7 Q$ A

浏览器支持

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

可能的值

4 A/ d# g, x8 m2 ]+ g1 F, \; C2 ^3 ]" [" Q a3 y2 a# g( g8 w2 P$ R/ W! ]4 |: `4 ]) K$ ^' z% L V9 k- E; b( \3 q# m3 H% n% r6 z2 U$ e/ r5 U0 C" U g" F3 G" z, H/ r. D7 D1 b8 J: _0 c G2 ?& F- h( q$ a' N3 ?( J- k2 F! _6 }' O$ X1 Q4 r5 ^+ @. W5 M: e! |4 [) B6 [$ O% k0 k- R+ r: u6 @" b" u: K6 o* d/ r3 q* o, m1 X! t# h; P% F3 V/ p% U1 _7 ]$ M5 n: ]0 C; Q5 Z' C1 [4 v$ ]1 R& V- x. A1 {2 L* u/ v: e, ~) c& l, b$ Q# J. I) Q1 ]) X& x: s3 `/ h$ c/ @/ A1 j; F$ ]6 f" ~" v, @" j: d0 S7 v- D& N* e! U1 n0 t% v9 y& d7 T5 a9 `9 }4 D. G( ?! v; q+ _7 V, _* l" x7 y8 h5 N( X6 z5 z( ]+ \" S, i$ m) Z+ }0 k; T& U, o! [+ y) C5 C) o. R4 B6 V! \2 u! I) P) C7 E c5 a! u7 c- o$ V' b0 x j, D( ?) ~8 t* n8 |. V7 b2 s, f0 R( _3 ]( f' E& F( S5 l3 k% w4 ^7 p7 M' b! F* o2 `& y/ C6 U; H% D0 N1 r* |

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