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

happyxp

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

. B$ @+ I2 N3 ~; R& P* [2 W, V/ b

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

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

不

# B- l+ n+ [2 ?" a

自动

换行

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

 

以下是display的用法和定义：

 

定义和用法

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

! a2 Q% d# y% ?/ ^: ^' U

说明

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

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

0 T2 j/ n* }2 ~4 I0 j: l+ S+ P4 _4 L" n: ?+ j0 g# C) p4 C+ B9 o2 F+ M5 g' u/ Z4 a+ m9 J. z; T* O; v4 l3 v% B) g! ?3 c/ \/ B; j; h( g* j+ z1 F! B0 U* _6 [9 D/ R) \4 a. Q/ V8 n

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

7 a# d+ q. O% G& K4 ~/ p3 g

实例

4 f) |% ~3 s. S3 p3 D# c. H! V

使段落生出行内框：

p.inline
/ o& e6 K6 B& R1 O7 o& \8 j  {
& `& q. l5 P) m7 i- n/ N/ W  display:inline;
  }

# l- z" X# q; z' u! {4 h, p

浏览器支持

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

4 o8 k8 Q9 f; o; T ^

可能的值

6 ^7 m' d- j" e Y2 u0 ~9 S/ K+ N, ~$ y8 X# P2 t9 B( Z, l0 O" `. x7 N! k- Q" S* |" A, L( G1 V1 ^, e% I. m) B* _ O6 `) K4 x. C- e% r" j. c8 A- i: h' [" W' h. L, j' ~* O4 [+ l5 t! j5 X# E. _- d' v) q! l' j9 o2 k' y# s# Y8 ?0 R) `" m: H) ~7 T6 Y8 ]% ]7 J# G2 h6 R# l! a: r) ?8 K4 a) }. X" U4 Y/ q: K+ k% A+ O7 ]3 P' ?3 V. i5 z i" Q$ Z& E3 J2 I0 J; q9 x3 [2 j0 }$ T3 G2 t/ V- a7 f$ k0 i& s( _. q" S0 x+ p# r$ e2 B g, G" q5 N- G! w2 |; G+ C4 `. {; y5 r& t# X8 r2 C! p8 m+ R9 P* u" H# G; _6 w9 N/ V2 ]; }' D1 r: I8 ~3 S3 U# g7 h& ^- L: O# e o) K N. v8 w9 V0 p' I/ U' @. [1 _( u5 m1 W; f N& H8 L/ N ?0 g" t$ u- B! v3 [9 n/ B I' u0 t# k7 B7 y& O% | d( i! P% L$ `! H( J7 f# j8 P% {4 o" I$ l+ ]' @% R4 m$ }0 l: a& \& C, {, T& W5 y, e2 V& A" D% h) z9 D" J5 H* N

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