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

happyxp

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

/ a0 c% G( Z) ]$ X, k1 @& n1 U

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

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

不

自动

换行

! N3 X' K( }6 O3 T4 r# s. H& e) G

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

 

0 L2 @" s4 h) Q

以下是display的用法和定义：

: I0 R4 g5 }3 @7 K4 K

 

0 m2 v* Z4 m' A2 H& S

0 h- J% _, v8 A* P

定义和用法

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

* P8 @$ V% Y$ c+ R% }

说明

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

# }0 U) K4 L' s$ T7 J1 X `/ i

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

' ]- g0 Q4 ~0 \7 ?. A5 |& g3 I& R* \/ A' n8 c: G- n& O" A3 [$ c. z! o7 k2 P. W$ b4 K8 k" |/ L, E- S s+ y- H1 Q/ o2 ~: Q5 R+ J3 V$ U- `) Z' j" a% B* U0 m6 U- i4 \- g1 p' Y- M9 s0 u/ }) } l4 m

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

' R% ^. A! @3 m) T

实例

使段落生出行内框：

p.inline
  {
: T  p/ n! I% Y5 a2 ]2 ?7 c  display:inline;
  }

& b2 y/ h! e6 V8 Z- D" l

( f/ l* u# O9 `1 C" y2 B- `

浏览器支持

( I" X' p; t( ?; d' ^2 z- T

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

) e x, U4 T4 x0 X* M/ W6 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"。

1 |/ i: c, u, N0 ]% c

可能的值

h' m$ C3 c0 `4 J7 Z' l4 P7 y; v. p. V* d4 W( W" t# l2 ?4 A1 _6 m4 z5 ~3 x! d7 G7 o1 v- `! j" n# x7 Z4 I) v5 o1 X+ k* _( g1 t/ g" z0 x C' R; C3 \# u2 a8 A+ A% q+ P6 U5 [7 s: Y+ g$ w1 U7 N2 C |- j9 K( Z \; B" C% I7 q* S7 M' s6 K1 l- b# j, _) d) w* I6 o- H7 `) _& s+ V9 h% E9 [, Q; ~$ A/ s3 G% m9 N$ a8 x% c. F0 G$ D! X- k% b3 ^5 P$ J. L. r' Q! {. j+ x$ _8 E8 E7 ]2 }/ L' f; b# v8 G. a5 Z) Q5 O( {: n4 }" M& D& H/ R8 e8 ^0 \: [8 k7 Q' ~& E2 A, q6 g2 }. {- i! I) {/ R3 d1 m8 G! b( e8 h, ~0 F, q$ ^: m% P7 a8 L& G/ H( v% E+ r6 s1 R5 t F. I. T+ {2 D, {" `( ?5 ?% ]! ]& D; f9 k4 {8 C' C5 s9 U, ?' ~$ n5 @1 S% m& U1 d( S2 S+ \& A# r) T1 G, d2 W7 [0 |% C" c; e/ N; }9 E \: q2 F' [ `. B

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