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

happyxp

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

9 `1 I. z2 c6 v2 t. V- z

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

0 j# n* S9 W I5 e- W" Y

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

不

# S0 \3 k; O. m% @: r( q* ~" v+ O

自动

$ g, {1 C! r1 u3 ~- k# g; x. b, q% g

换行

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

 

以下是display的用法和定义：

 

定义和用法

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

说明

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

! @% D5 F' f5 ^; \/ ~8 f

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

% E d9 P: z+ A. t$ Q8 T: l0 A# W% N4 N1 `$ m- Y( I+ S% K; X" h% d8 M+ V% h) ?% k2 H' W0 J3 p3 W/ {, i# ?% `9 X! p. s* l: F6 |% R! L+ F+ D6 }5 Y* O# ?( Z% ~5 i& H8 t5 x7 q, e) F. m% r( y7 I/ e1 h5 K; l: [

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

实例

使段落生出行内框：

p.inline
  {
  display:inline;
3 b) ^" \7 V. a  }

1 _/ b1 x2 Z. \4 t" `

浏览器支持

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

# u5 x( |# }- Q6 e' W; c3 @ q

可能的值

i( ^/ S" S( b1 D* A# q, o- E2 s+ r, Z: D. [" y; w3 p l# W6 `) R7 V5 W8 m- c) b1 O" Z2 F; g% Z2 r6 f& O% I- u/ F- X$ r, h: E- {" s& N. I0 y" V7 X. ^, \1 U/ @% W: s7 t1 R4 k/ v/ {! i! i. K6 I3 Z3 Y! r/ U+ V1 `8 ^. Q: [+ g% C# }- ~1 D5 ]" @ P" p( w4 p3 Y& N% \. k3 @7 E4 C9 n* l% W) T4 p8 h. v+ e* f$ e5 d- Q! v" H8 z! `* U0 a; {* s/ |) c2 a3 I% Q: D% w+ }0 [3 ^3 x. j6 f$ \/ s& _5 r: R2 P* ], g, P3 K& O1 f6 Y* ]" h! Y0 V' a% \2 L+ A: J9 {% D' v! B$ f/ B1 _- ~4 V4 E5 h1 B6 X' n, n# J1 T0 r. O' d/ M, _7 @1 s% R* @' y9 C t) R) _, b# H7 ~; T/ d! p. h) \" _2 Q, H5 o* s0 ?5 x2 e% k- J3 l5 L, h( \6 `6 a6 x1 B I- w' f( ]0 ^9 P/ `0 ~" g0 F' [% r/ [ u9 w! |" @+ P! G$ c8 K! M; }$ b! j. ?9 }+ h% |4 M# y( ]1 e( M+ z; U- k7 l) J, o" Z( r8 v# \ Z( m% q1 s# T; p! L- o

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