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

happyxp

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

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

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

3 _4 B" q' B3 k& @2 J6 F1 g+ N

不

自动

换行

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

 

以下是display的用法和定义：

 

4 ^; s6 s7 f( Y

1 L( b+ m9 T2 K) u; a

定义和用法

' D( R0 t7 r$ r7 N. x; D+ ]

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

1 t w, f" |9 I1 C2 ]( t5 v% x& s

说明

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

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

" z6 O9 m+ v! P- M; c t3 o: Q9 ^+ D) H; r' g8 F8 |% L1 w% ~0 @% J, E% ]7 }/ q" @; x8 ?# L0 u+ u( I3 K# s" z2 ^' {( ?5 T& m1 i5 u6 j& p. ?0 B! T O' L r

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

3 i3 ?; }. y3 Q5 b( z5 }$ l

实例

1 x+ E4 n! o3 K

使段落生出行内框：

p.inline
+ q; o+ Q/ p! E. }1 B  {
  display:inline;
: F, k# Q8 i( y+ U6 ^$ `0 h  }

: U2 D$ X6 H- q( j2 l+ O" u

浏览器支持

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

8 X: B* O* P, O

注释：如果规定了 !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 X0 y! e; A8 v, Q: P1 t# P

可能的值

6 d9 ^( n3 E$ u0 \) J N: P$ E: V7 _0 U0 I+ |- }# i% I& ?: X/ W/ k% X* f! K) \. W3 A7 L* ]9 c7 I7 b- s( R* k0 U9 y7 G; n# j) ]2 P3 K8 p/ F' |2 E1 l* e; n9 f! s/ N- l3 u% C5 }& N0 m1 {/ e# f+ f/ u9 @: L& i1 R/ H* N0 e# O. H9 E6 c$ a! U9 a( R, f4 r% X9 x4 a7 E# w# R9 }) {) g; q+ f( ^6 i- P7 _2 z* v, v r3 m0 v& W V- j! i. V& K2 ~$ p& _5 q- a# ]0 W) E# D( T) p1 O8 ~8 x- q- H/ S2 I- F2 L I4 k% B7 i0 e2 c6 S' T! T# _ ?2 e6 [8 T# \( H- l! {9 D$ h" n- O# [5 P( G& l6 R7 X2 K7 d( R. a @/ Y, j* a4 ^8 R4 |% K9 |8 v' L8 Y3 \" L$ T- J+ @; [: B W0 v3 k" K& s" u' c! o% y3 Z! w) X2 K" w* |# V" Z

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