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

happyxp

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

' A; p# N9 P5 P

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

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

* }) x1 `9 G7 n$ K: n4 q

不

" i; s q2 v2 O$ B

自动

换行

8 f6 h2 M3 A, m5 ^/ n0 S) r

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

" m. j% K' @2 w5 @6 h

 

( k$ N( q! T' C0 c3 j2 p% m

以下是display的用法和定义：

! }; V$ n6 q- N! V) c, J

 

定义和用法

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

- Z, J; ^; A @! K

说明

4 C4 S0 m* O" ? `0 \' G

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

]4 Q4 W, F+ E C4 B1 Y

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

8 W4 M0 }' y7 _) V+ ?$ D7 ]! a8 T% t' T. P7 t; v7 D' t- `$ H1 f4 [4 | d, O* ^- i# l! o6 e" x( ~- _! S* b+ z" ]9 } J8 M; e, D* @ d: D, A8 Q# U f5 @$ B8 f9 _6 T1 s+ l9 s/ k* @- l3 I6 n' m" f; C3 t" a6 C2 c* ]

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

实例

使段落生出行内框：

p.inline
; Q0 J2 a$ z) _, c1 {  E  {
/ T: Z- Q) ?8 Y* n$ \0 L  display:inline;
  }

浏览器支持

7 g7 r) V% z, q9 L0 B v* 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"。

+ J3 J, F$ l+ }8 G$ f2 N& R

可能的值

6 \5 G* X5 N! B5 @, ?3 m8 f7 D3 ?: [5 ?9 K- h2 L6 A4 e2 ]/ P5 `8 \. z9 _7 ^! `; b$ c( a, q. C o1 |( U7 k$ R7 T: w# N4 x0 v7 l; [6 g& Q2 J; m7 ?# z8 v% R0 c0 W5 {. ?- z8 H3 h3 V- K& k8 v) e0 I3 v" `/ o$ v! S% v/ Q( a8 T8 R) ^9 Q, B, K/ A6 `( d# Q2 q- p2 Q# d& N. [5 R+ ~. F; b2 p! z% Y( C2 K" H+ w3 P. @6 G# C$ X7 P" b. x+ U9 r9 F. `6 m* l) W, C- M; c8 y( y2 m$ @; c. Z( Z* p$ D* a4 `5 t& ^ ^# H4 w8 x/ |9 k$ Y6 q' M! t* Y' z7 r0 _8 C0 F% ?) J, c- C( e1 q5 Z5 l& C0 T) t [( X3 F1 }+ X1 S! z, U9 O4 s: l1 `8 l0 t9 _, O9 [. @3 ~& Z/ C5 a; ]% ]0 g1 o7 x: q I2 k2 |$ a' u# Y' Z; n6 f8 D( \% C g6 B; `1 @" U, i$ Q8 Y/ m( P0 S; H7 }3 J4 n" {" h! Z. g% f+ G# v- l. g( Z) r/ n" d2 K8 A4 I( e, ^1 `* e9 D. _ F! P8 H# n) \7 ~. Z( I: T8 h5 b* Q; A! ?# g8 _) H7 c) M" U7 a. n; {& ` J b$ B* B* A" |+ e

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