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

happyxp

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

( w8 a# P2 [9 f

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

0 s t J. W2 r6 G+ D; i7 Z

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

5 I/ |$ l. a- p+ u2 k( N

不

自动

换行

0 }0 f+ y$ V9 O5 ?7 q w3 i

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

 

$ B8 T( f1 G) {& i" ^

以下是display的用法和定义：

 

定义和用法

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

说明

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

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

& W+ l" h! `5 b6 [( H- u4 X( j" Z) k- p* w# x) K+ K5 ]- J) j- x4 z5 `/ c; g2 b) V# s x% ^$ d- u; @' r3 i& q8 z6 }6 H( s3 v, Y5 M( z2 o$ w0 r. p f9 ~' _5 R: b7 D" @9 E6 P7 H$ ?3 Q# v$ z D

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

. I$ h& E. H0 L3 e1 ^4 @* `

实例

使段落生出行内框：

p.inline
  {
* B& _) H/ ^* q2 X3 R  display:inline;
0 V' F% V! p9 l  }

8 x8 E( e3 q: w4 ~

1 d F9 _6 V, @( H

浏览器支持

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

6 X! E) j5 I: [

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

; ^5 Y+ {. n8 x

可能的值

6 z5 y) l u" d6 T: T. Y, f" M, k5 Y0 N. Y( s8 z: e: @' D$ H( B p) ]( y1 W' M0 M9 L H" x1 G. o4 i3 v0 u# T; k2 y8 i" X+ b/ b$ I% h/ K) ~# i X% s( w% c& v8 W+ o' M- i* P/ w/ @3 L) k+ x7 v0 n9 ]' ?2 U9 e- y! D" H! M. C; {- g8 |. @) N& z0 Y% r; o4 l5 `9 s# x) }0 l, [8 b8 O0 H+ d% A6 S) z8 ^: N7 G: _% l' k3 H6 B1 N ]* a, \4 q. P' Y0 H% i! J% R) G# z7 z' C% y+ _& J6 Z3 p8 v$ h6 F) J/ L/ [( r( Z6 k% W: W c% k* X; F' E* x# V; f6 x7 x4 W% x' a8 A) |# x3 G$ C" O& Y! @! p6 D: D6 l' y- a# N# h1 o! d$ [; b- ~( J+ Y8 u/ ?9 ?1 C# ?' |9 ]* _+ `0 P" x9 U" X9 w$ t6 b+ W+ K- d; n. j* U. N4 u) f) }" E9 J% u" f! X1 j, ]0 O5 R) m9 M: L0 s' |8 w. ]% w0 Y O8 Y& u; j" K' j, @# i$ ?; N+ w: J4 Y: h9 t% c2 B1 c$ p4 ]7 U) m$ o* [4 {* w: R: X. \

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