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

happyxp

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

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

0 g/ H5 s3 X* ?% E, i

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

" f, Z2 L7 |' Z; \5 B1 _- ^5 T

不

自动

换行

# E4 e5 z; A# u$ J9 O. G; d

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

 

以下是display的用法和定义：

- w2 M; ]* ^ x6 w! @. r! D$ v

 

( z# h V# [+ f1 Y

定义和用法

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

说明

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

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

' @3 v$ d; M! D: z7 F3 p w* Y$ I) @9 G! o: f, F9 m7 x+ u) z0 q2 u6 X! n8 j) m9 `8 k; t" S7 x/ M& A6 ^% v4 S( P( _: w3 e. y8 h9 G: t- H* m! g" T( A

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

实例

4 d0 a8 K% n) V! ]5 ~ G

使段落生出行内框：

p.inline
9 E: |. R: o' u  {
+ q" U6 ^, r' d1 |3 c  display:inline;
  }

浏览器支持

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

/ G. \( E( t! n* w! c) @2 b$ j

注释：如果规定了 !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 Y: ^, P% Q; i" q' f

可能的值

$ v, K1 L# @# g2 U+ z! `! q! Y4 g% M9 y: l- \0 `" W% Z j* N1 G( t. c6 e; F# n( P) u( N) N% Q7 Q( Q; _ ^5 p- ~( F; V! S& L3 n; H, M" a* w$ j$ [9 ]& a7 O' I# X9 t6 I/ b: Z* ]* x0 n. S( `* F0 [. I* }- j( `9 K0 |, a8 a1 ]: J4 `2 `- U1 _6 j8 b5 e8 ], I" P, w( i2 `/ {% F4 C' f$ y+ N! c- D& F+ I# b& F9 [- E& v: f7 M7 o' m+ G# g7 L' [. V6 W+ P7 I- |8 S! O& Q' n& x* E: [8 J# Y, L# H m; S" V; ~' Q# @, F2 v0 |! W4 h( f6 l2 Z( P- ^* ~' S: d( v8 h2 D2 X8 E+ @5 K' e: l& l. W9 e' ]6 M r0 B3 J; p+ E* N+ c9 S5 @0 D+ d- O2 q* T. e/ y; {- Q9 X0 `2 ]+ s3 b* P6 _. l- n, l2 D5 _( m# F+ x7 [7 s; f+ ~7 ~+ K9 ~# j8 C& y" N, W, W1 v' n" ?! o! {/ i$ I3 N# z6 I }% M! _3 m p2 A; y$ v: X" H$ D+ }7 v- t& l) K) d) r; _# ]9 \0 c z( ]3 r& K7 H4 v# ]) e( V% p$ |+ p) w! G, F) x( O" g0 g* v0 Q8 E& u2 j, J7 k |& I

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