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

happyxp

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

! H, C. H* a" v6 a+ o

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

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

不

5 c& g. _3 L- n. B, h0 e6 d( X

自动

9 C0 e! `# L0 d8 P) Z7 u+ @0 m' ^

换行

7 g1 ~7 a; F/ @2 [3 W

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

 

+ ^# V% J* @4 q+ d% l7 y! U* P+ \

以下是display的用法和定义：

 

定义和用法

2 P8 {& L3 u1 p& X+ y

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

5 V3 m' W8 U8 i T

说明

/ `# u3 ?5 M3 X) U3 j

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

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

. l( @5 c4 U* W' K' q5 n. L. n+ t3 a' T, ?' |' p1 P0 V) k; L& Y i3 Y/ v8 V! i& Q/ Y4 s7 I0 q5 E/ ^$ V9 @; A# T" h6 K: j* P3 G7 z$ M. t5 K$ @, b. X9 ^3 @! v* t% ?0 C- b# [8 p5 W3 v2 M9 t7 w5 w3 A$ X( |2 `( X* W. ^$ L; M( j# ~1 O8 H; m7 q1 ]! O9 U4 E/ g! k. o

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

实例

/ n' a7 o- C: G+ V: `1 s( c

使段落生出行内框：

p.inline
  {
3 W1 b6 N9 u" e  display:inline;
4 n2 ^9 |' O. J; E4 Z, l' Y( `  }

0 a3 Q: y, L2 |6 K

浏览器支持

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

/ b; ^4 S/ y( {7 v' [* L( S; V

可能的值

8 k" l, V' }5 N: `- L( O5 n1 B( m2 j2 a% ~9 V, B; e. }( |2 D8 O4 _6 }8 I/ W) ?# h9 T# }1 w- U6 @, N* e# [- z* q. Q5 l2 z* d6 x N6 t% m$ j J2 ?% _, t; k; s" d& z4 m! E8 g2 O# b4 A" l: }% i( j; G, T* @6 ~/ R4 _; K8 \" R3 j8 b9 l- j% p$ A' @% }# ?( H1 j c1 K# R: s( r. G6 b9 S5 i- @7 ~6 @) K0 y2 G% x! K/ R4 {7 j! u+ a3 H/ I( I1 f' v$ q+ y9 P- {: T) S$ S, U) d2 j" u& _0 r" T& Q0 j4 i6 q" ~! s- z$ r, N1 _" c* l9 K) f- d5 T1 a9 @& |3 F& ^' t# Z# E$ n, X1 n) Q. m+ M+ h4 q% E! B9 x5 g3 D* [' Y1 R/ L8 u! Q/ f) R6 M* m4 u+ F* f( v" T: F$ F+ W4 n7 l. T; \0 l& |: e) I8 U! y0 g% m5 J" |; Z% \9 k% m# H! I! [7 ?. f- V- ]. F( j6 ^3 B0 x$ q( [6 b- A: v' ^5 ~5 O( N, q" l7 \9 A( d4 h6 u- v# M( H' [' v3 H

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