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

happyxp

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

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

9 \# p, d% \# e9 T2 g1 @

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

不

自动

+ P# J# D( v m

换行

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

t% u/ G! ^0 H' H% ^4 [# b" o

 

' d& F) i0 U3 S8 M' e

以下是display的用法和定义：

1 ^$ h9 Q# f7 D2 @! W$ s( U" E# Z

 

定义和用法

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

说明

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

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

; c& b# l: @6 W3 F: K2 ?- z2 ]- M% p. r! q I1 R |7 v; `4 l$ g, q! K; g$ g2 M4 O) L' \' x2 C7 H

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

7 i9 c/ }7 K2 F" b

9 A% C5 D# s' Z& q

实例

. J3 Y' l; h3 s( Q* x2 _

使段落生出行内框：

p.inline
6 N3 z8 j6 N8 H( s& D4 {& m  {
* R/ O9 y8 D  a5 e8 P  display:inline;
2 L' V* n5 j, c- ~$ B  }

7 k# f% }3 S4 @/ R3 k) y, s0 {. \( l

" S7 X/ z: P2 C4 ^8 o

浏览器支持

! j7 c- p' F0 B7 i9 m/ D

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

$ \2 @7 I- b$ l- ^5 r

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

可能的值

5 W8 T8 n1 |: Q$ W( [3 U4 Q5 \2 Q6 G1 Z9 `5 r% @. U8 ~) T5 P F6 K a3 {2 k3 N* J3 ?/ y% K( J% I8 @* O+ v# E/ J# C/ a% g' A; c4 n! F! I5 p" ^5 |/ g3 p' D0 ~3 [6 v b s) a& G+ ~' B2 v5 {) S, g- `6 R- f( q! t$ j4 `0 j1 q9 X. }7 k$ y6 C+ J* {$ Q9 Q* x/ C- { b$ `) Y! t) o5 B- }' O6 F: a2 P0 q% `" ~; v' J) s: p* n$ ?. `; k) N+ p+ ]7 o, S$ }( x4 a! U/ M6 p6 O% |; Q; ?% {5 @9 l! ?7 [3 K, D& z1 E2 m+ B2 ?9 `, R U8 |0 ?) y& {; i* _; J' N. _0 N2 a9 ]* w/ ?' b4 c" I2 i# A p# D/ E/ }3 l, z T% s8 g- _2 d! n6 Z8 f7 u5 f# m, [' `+ P4 A6 [, s; _# q8 o& ^5 j9 O2 k E$ P5 H4 B2 Y4 j. Q# D* Z& u, ?" B) m1 p8 F! y4 k0 [( O, V: H; y! J" o. `3 s5 M, ~' |1 s$ @7 X% |( z: C3 B. I4 x( _: A7 V7 }+ f; x/ q4 R$ l# k; R( ~+ A2 C" b, e2 a2 n, y& C" d% B1 B4 w/ w; a- u) y' t' r" H. a# ~$ i: n5 c6 \- C: s5 D( |$ {% q, i; @: V- X5 X% G1 H1 {* [, v. W9 v# c/ F1 V0 n" B2 A+ q6 d* q8 g' L/ w! i0 ]. ?* |0 ?# \* [* m& r1 D: ^( \, i. j

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