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

happyxp

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

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

0 P* Z3 v2 r9 Z8 K* a( d

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

不

% {; f5 a) H8 z. r. h

自动

* Q# |: C+ v7 ?# ]" {

换行

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

0 w6 |0 Z$ ?9 a+ A& m: `

 

以下是display的用法和定义：

 

k+ H3 X! o: F3 I4 Y+ ]: H6 X

定义和用法

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

- B2 Q8 {$ ?- d n2 u+ X2 R

说明

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

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

8 Z% O* L" B+ d$ ^: \% Z; s$ ]! P e0 L# B9 T ?1 I3 v8 v" m T( e/ t7 p' }' h; z8 d* F( K. c* k8 ~0 c7 ^4 f( O! e* M. K" H" {! D- s _0 n. \9 e3 g2 }4 u7 z h: b0 p3 `3 C* N. }1 Y' ^; z+ M9 c% h& L; P& I8 k2 a/ w% q8 {4 z4 e5 ]* a6 E2 @& f1 n6 _( M* |

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

6 N. @8 \4 ^# e7 E% G4 l x

+ D5 q' u; S$ k+ E3 D. c9 i

实例

$ t! w- u: B1 @0 M

使段落生出行内框：

p.inline
# j4 Q0 K0 [) Q: y- [" C  {
3 j# R' L# \6 ^, Q6 h" u* y  display:inline;
$ x3 c! v9 f+ G$ f  }

# s: [3 _5 V$ i M0 \5 H

浏览器支持

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

2 |( w! N# L; {$ ?1 ^5 u

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

可能的值

0 S( d9 a1 T4 V' A& a0 a$ r' b9 I* G" w) W5 `1 C9 v9 g2 k- [, M, `) u; |9 O- w( t: _$ I1 k5 g8 Z* ]$ H+ n% f2 u7 K: W6 g, U4 n- Q2 x' G3 {9 h9 h% d1 o% e) R9 T+ O! C+ o) e5 z) U9 k! }$ v6 z& |, x: t3 z" S# N& x2 P1 G2 [" B! M6 Y, Z2 _: C( i! {; e9 {- j" ~! P W3 `8 ]5 Z/ {' S- r' _7 d2 `$ g, T/ G# m2 U! d+ ~, ~+ o% ?4 n& o# P; Z/ |( P# U B7 I K! O0 H* b# `3 H: ]; j( i! q9 q8 ^7 d, i! ~6 \6 A' F1 d: d$ d0 |7 X) ^ W; J( m! \2 ^% K' i5 P) u. k& Y" W/ n K! j L$ u, l, u+ K, B1 Y) y @2 T. v. Z+ J* K1 c4 n V) V% w J D# Y# p0 |2 ?0 z) x6 o4 j7 Y& Y( c! u8 g# Z+ b" `# p, A4 _% a: w/ j5 D' ^6 [+ I: a5 j: o" T' F; v5 R0 ~: R! H5 n: ~( L2 W( w$ L8 C/ ~4 `) y% T! H, |* f, c2 {0 V+ l& K, i% M' N3 J. }5 P5 G8 N0 T8 ~' ?& Y' f* v, z4 {) Y" r4 q# a* V8 [" R; M% ?* H7 x" g; f N& [ L6 d5 J S# _- W8 E+ F F0 m/ q 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 属性的值。