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

happyxp

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

' Q# B* n1 G+ E6 X7 U' @0 h

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

8 P. ] ~* m* X

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

: ]- V& _8 z2 n) N4 i- g

不

自动

' W$ C/ E# u& X" V" V3 H# M

换行

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

3 n) U' E; a# A# y

 

以下是display的用法和定义：

 

定义和用法

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

说明

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

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

8 Y, P' E7 a( q, ^0 |+ k- D+ i# N: A$ x' I6 }/ K) j" C5 r1 ~' ^5 ~* }! E/ ~$ B1 ?+ S/ u3 i2 e( {5 o! Q4 s8 n9 u$ r/ c8 L" q2 {- Z4 |- A& }+ i7 c6 V% w7 s: g* t3 L2 e" u0 S9 b( Z" R, |" S

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

8 P) ^$ E1 L# c/ Q; @ y0 @

/ ^7 Z5 g9 a2 n0 u" a3 F! y

实例

4 |: i, p9 d8 k H$ v$ R* o

使段落生出行内框：

p.inline
  {
; v1 V6 v/ |/ t. K$ S  display:inline;
  }

& X9 \ ]$ W" |! N) z

浏览器支持

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

8 q) i* S% e9 p" Q8 G' j% f0 L% e

可能的值

7 t2 j% H a* `) P0 z2 r* p& e1 { s- O9 b$ P1 R3 [ y# _+ s6 t7 q3 c8 i: c% A# b/ z, i0 V. z+ ^* p7 t+ z% c4 D/ C. _% u; h0 E) B$ |! k+ A$ _: v$ P L, |* s, J! c, z* y& c1 c: m j/ T( } b; ?2 ^4 a6 F8 _2 e( D5 O0 R4 h% t) J. _6 {) V1 `( k b0 x8 |$ ?/ Y3 ^; S8 i P, X) S! F4 t8 A' w6 \6 s& E8 d: F) n, v3 r# x# @" U/ ?5 h8 `3 U3 L/ l# E7 ]% ?4 Q3 C: C! i' A( ]% I- |4 P( a7 @& [; M5 x- P$ Y( l! x7 }; @5 C3 d j4 X2 b; n U# j2 G2 \ d0 T; {$ D6 E' O; _7 N. k) J% G6 C7 ?1 F9 T! c0 e. G( o- l0 t/ ~. B3 T- z# F1 M6 _4 E5 t% _* h& }; h# _4 g: c- N+ u6 I, a$ c/ B0 [8 { _# h% T4 u7 \) C$ e9 Z9 W! i% P9 n8 j0 T+ o w$ z8 [+ A4 x* G/ K5 k. L( \+ _9 u3 z! |9 W* s) D( t, x+ m! f4 `7 A) E; j2 B S: C- U! x0 D+ A( x8 j7 u' V4 P( W9 y7 j7 h3 {1 C# H- l8 }; e ~; b _, Q4 Z7 j2 ~& D; w1 B- j$ Z6 l1 t9 Q D7 c7 x6 j f# m5 D3 n. `4 P2 ^8 C. V9 f0 \7 d$ y- N( ~" m$ t3 K+ H) A' a# D2 {/ x* T

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