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

happyxp

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

1 m: a% [0 {7 K/ i/ y

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

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

不

+ N K( ]0 b2 u' d& s9 }7 W

自动

换行

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

 

5 y+ Q9 |5 q+ y2 g

以下是display的用法和定义：

' T! e1 u+ `/ K3 `; @; b2 z

 

0 h+ T* A/ X3 D( `4 `& s, L

定义和用法

( P5 j0 ^2 s: w7 D' E/ a

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

2 F5 S1 `( d1 q

说明

" a6 q, v" o& [, G: ]6 X J, p

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

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

' o6 V6 S( W% s5 E+ U- X0 J- m$ B* Z6 n$ ~4 a% L6 w" p" V' ~4 P! m1 e F* A7 k( p3 a3 ^# `- O: U: B4 I2 C5 {, }" A& c l3 I+ x/ M6 i, {" N1 }# c% n7 N" v$ p; a- A$ j& B* G, A( F1 \ f0 ~" x: u

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

& D2 M' N {4 z& l

实例

使段落生出行内框：

p.inline
) N- I, B! E3 G" Z; O1 [+ k  {
0 q/ T1 ^8 M) P! q! E/ i& k" T  display:inline;
, W! p/ b/ x- C7 j1 P" q3 r  }

6 @9 {, G& s, S8 _3 ?; U# |2 X O

浏览器支持

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

6 G2 j9 a* S+ ^0 s! U+ T

可能的值

* P& x/ S: T6 ?# P( s, [& Q/ @5 l0 k% w# t3 D% G/ z! R( h4 C {" b+ b ?: B/ X- t& Q0 v$ c% l) l- M7 S' b9 d; N" m1 r3 x7 l7 b+ H5 O. v1 h0 d- T8 l$ f1 E; V7 N! Z9 `: ]5 n' @ {9 g7 s8 `2 E6 h# t3 x9 ^( b( m9 p2 Z t& T a: s+ i8 S, R' x( n/ V: V, d+ G: v- b9 s7 ]1 J1 L2 ?* P4 b) Z. M0 W: }6 I6 I U3 R \% R! ^. _' S7 f, ~, e7 M0 m; b& p% f" C4 E$ x9 ?3 ~7 }9 K, C3 E% `" L* D1 T+ I8 B5 I) X5 F, a0 e& ]1 D% ~ v w9 C l! X# g4 `. q6 g/ T% t- J/ G. D( c1 e- M$ O: u2 _/ L. {2 _1 l: [$ I' f) a$ q- {# L5 a ^9 x# U! |! l9 g ^. H2 A8 `& F9 q" r+ t1 H+ ]. u& o! ~6 ` K4 A8 J; ?' a% u/ A+ \3 A& t6 w m* A. _; Z! ^( `0 [4 @; L- ?0 b) E# }8 I! Q+ A1 l$ D3 L- ^) e/ e& O& K7 d+ ~/ b1 z# ?$ n! i$ E" b M( }5 J% k5 s2 o+ E" i; N8 }7 X7 D9 a4 R7 w- Z7 K0 e9 Y7 T% c) K2 z- F1 y# x6 k7 S4 C0 ?: y+ o" U$ t' y! `4 y0 A" J3 k0 {/ a4 f) e9 c

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