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

happyxp

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

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

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

不

自动

' X0 C9 B+ q. D9 Y. H7 R+ F# A# J

换行

! d9 L/ C: A' A3 ?& q+ V. N

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

& N0 s- j+ w0 `) r, S2 O

 

以下是display的用法和定义：

3 S6 I- \' M; l6 ?0 \$ S* [* V

 

" R, H7 ^, U8 j! ?8 f- `# }+ ~0 `

定义和用法

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

说明

2 h: B( p& A O9 J* q! ^ Y

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

9 M8 n% v, A/ o+ z% e

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

# \5 b2 c( i* ]7 c! ]$ f( Q+ d. C/ m; V1 H0 r) `" ^- E9 U7 k% Z/ i: O; i# ]# V) @( h4 q4 I7 }3 _

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

, b1 L) \. G4 q" z. I5 E8 Z

实例

使段落生出行内框：

p.inline
  {
/ A: Z& Q- Z$ O/ V% X  display:inline;
  }

浏览器支持

/ Z4 L/ k$ p6 P( g1 C/ E

所有主流浏览器都支持 display 属性。

0 S5 D* w( }$ j) ~0 g7 D( x

注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

可能的值

& n% r c: v. @ W" R$ q( s4 y! S! v# i6 V+ D! }9 }5 r) W. \: u* [) @ e4 L3 l, T+ E; F2 {1 l5 a$ H7 b. O- H7 F( J' d# ?9 c7 T2 A$ H' C5 n3 n( Q9 D' g! C) P+ }9 W8 D% Q2 W( X8 q' i# b" u+ I4 S, P! e) p( U D4 A- Q7 o8 b1 M4 |' U; Y; i2 ~: M$ L' [) X6 o8 G, }1 c7 M' P8 G+ R0 d+ i2 a2 R+ o+ U( v% `7 B) ~' H9 k% g( N6 J5 g6 F2 f5 X* f2 W" O: h5 i% s3 |& V2 N/ N4 ~ s m$ N. P( e$ D R6 A5 h' g& A+ H3 z! W; L, a+ l6 }7 V: K/ u2 k# m$ J+ c' o/ K Y' ?+ O( Z1 E% @( ^5 Z* t9 }, Q5 e. |3 n, g9 [7 u+ I0 W- i7 k/ [! U+ F6 N9 u( A. o" j+ X. H, \# `' {5 j8 i& I' ~6 r- \0 e% |$ {$ {9 W. {8 E9 m2 ], C+ C; ~" `6 B V4 g# K( r& y: h) D, W- C- B4 [9 j2 n o6 {% l7 U3 D# K& n# w% x f8 ?3 P9 K! ~3 Q4 y5 Q- S% N+ H! k0 q8 {8 u }( \$ g( Q2 z. G5 f

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