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

happyxp

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

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

; i) f# }1 b" _/ H* ~

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

4 H1 \8 k0 M" F# ]6 S& z9 O7 `

不

自动

换行

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

; R. `/ X3 q7 z( O% ?5 r( [" _

 

以下是display的用法和定义：

 

4 {, F% Z6 J( ~! m

定义和用法

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

& k2 \5 Q% c9 j: o! k# @

说明

4 g4 X3 ~6 R5 L, R$ `% E

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

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

5 F; K0 h$ |# i6 b% t1 u+ m) n' U" b4 s2 g" G$ b" W9 c0 j& A3 I, k5 S7 j! c3 I4 z+ `" K6 c6 `0 _) D$ M2 H9 [# |5 U! `! k9 n8 N7 X% i: }& L7 N& z5 S6 H' Z4 `9 }. ^. Y8 ]3 D& f) {/ M; s$ Q5 l& y+ X& z7 f2 k! a6 ^! u" u3 m

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

实例

k+ `$ ^+ W6 S% j. o

使段落生出行内框：

p.inline
  {
+ e$ e% p0 ^, h2 m  display:inline;
% R) g' e: e+ u  }

浏览器支持

3 P' \. Z9 \8 a* J& F% H6 Z

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

, E5 v1 z& ?, t% B2 Y) G) d

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

3 ?5 R0 X, f1 A7 j0 j

可能的值

& ?% j' ?' n V, ?6 x& r+ J7 N j/ K; G- o+ n" F2 v. \( `% s2 z/ I q3 Y- F% T: l* ~. a. j, o0 Y: b4 G+ m1 D7 W) w! i5 ^, @/ H z! C7 W, L9 S) P; @& E8 L( f! T: o+ M0 b9 [# u6 J7 X# n( r0 n$ X) {6 u/ }! ^! G0 h6 Z; i* U& N6 b4 A; q) D( j1 F7 q& ]3 ?, O% K1 f& x& x& q8 u. I. L s) {9 O3 C* E* u2 ^$ h$ w7 ?) s" C V- p. o6 e$ U0 S9 D) ]; g% H0 R' e- v7 j2 u& k2 C5 O/ n' Y( |* J/ e) t. K( |. k2 g- s8 j: Y1 J3 g7 K2 k+ h! f0 C- c5 G: r V+ j6 i6 ]0 p( M. T/ Q A+ F* K2 U0 ] D5 ]9 p. h2 L# c, v: _2 V8 H( K9 S3 H, R% F7 L# X( q$ Q* r2 d: j% G, [4 y7 v/ d+ W9 [1 V, j" t: H& _6 T9 a- H+ B/ C7 o7 j$ Y2 |& q: `1 P# r( p. w$ X" D8 @- o" |) I, L' P: f2 g* f* ^4 k" h2 y+ M& d; n: o0 s2 e. ~. n. W9 J* a+ h2 G, R( Y8 S8 I! O% t1 A& @6 x3 d& G- k* m, Q3 X8 ^) K7 _4 H- ^4 E1 k! k* U

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