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

happyxp

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

' f1 D4 i: n0 k! _5 `& H

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

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

不

自动

! m8 p/ R# [) @9 U: T

换行

. w+ ~) T4 I# u& W" D

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

l9 N# S) `6 g+ R9 ]

 

以下是display的用法和定义：

 

S% i7 e4 a- n/ w1 n

' b0 b% }6 J1 c4 [9 z) A6 Q

定义和用法

9 _+ I+ X4 ?3 x9 q- G2 f

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

) k# m* L3 C: n8 l4 ]( z' J( h

说明

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

& {+ L7 g& }7 E7 e. I H- {

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

! b5 S. d" T( W: _; ~, `9 N9 i& ~7 O6 B. I! J. y3 g, [) C- ~2 W2 j' l. C0 K$ A* B1 Y% \7 l! W. W8 }+ i" F- {& e4 ]# h3 j, |$ _: x+ n, w4 n' C [2 I9 `* t7 {* t7 T0 W9 D4 _" V* G6 T; G7 @6 }1 Y7 H, }% i! A T* s a% ]0 e; n8 o4 H6 }$ c$ l: J# ~# }2 c

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

实例

2 Z1 u$ F0 `& e) F7 q- v0 C* M

使段落生出行内框：

p.inline
3 ^& ]; @3 ?% Z0 |  \6 \) e  {
  display:inline;
+ ?/ m6 E4 O( o  }

# {3 t* T5 g( P

浏览器支持

1 v3 o& z! |5 }6 O0 X

所有主流浏览器都支持 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"。

( \/ Y$ {! Z1 p$ c

可能的值

! b, b! s4 }, `$ I7 Z8 i3 n% T U' E& h3 n$ t5 Y8 D4 z7 t* P7 ?: k# Z n' k/ k1 ~( X9 S& H$ R' l# |3 W' t! a0 Q P. e" z9 K0 O5 a4 i1 K5 ~7 b7 i3 S- ~3 x! S3 H/ Y% O! r7 b6 n2 {# H2 L" v; z( |% F, \' G" o4 v, o! N8 F0 }$ G8 ]4 S! d, {& p+ a7 q& u9 }7 P+ w; h4 @( v0 s4 f$ v8 ~* |1 _! L, K( c" o* H4 p- W4 ?- B0 |: |9 Y4 H) Q/ d/ e( U" A7 H6 S3 V7 A) C) A3 _ \6 A$ @: Y6 S) s) x* D T) g( l: l. ~( g8 L6 b$ w7 n0 |4 F, H/ n+ B M8 [. D+ l9 I! ~2 r' a) K4 i* v g- b% ]* {0 J+ n* Y1 C7 @' V! a5 I6 o" f1 m; f( D8 A% J1 A7 |' d5 e3 {, m, h. q# C+ `% N8 B0 p- t0 _1 F- w" @& W2 {9 J S$ C9 D8 u0 G, t, f4 E0 z, P; K O# k s5 f J5 K5 e& j% j% K7 |7 ~8 }5 r+ m; v& d8 e3 |3 V& g, n. b+ n. A8 Z2 t1 g3 Q* ?$ P) a3 @. T8 C# A5 E6 ?

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