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

happyxp

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

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

4 G9 V6 k: C8 R

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

0 x" b9 N) r% m; N- F+ I0 q

不

自动

换行

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

. w2 f4 i$ i g6 [ e5 W

 

以下是display的用法和定义：

7 j0 y6 y0 n9 [5 M( r0 D

 

定义和用法

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

5 ?8 `: \/ ~( v. O; f& f |

说明

% X3 p% z, C) `0 `! t# ~, E- _0 _

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

4 N/ J, d/ j7 w) X& W, r, l

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

$ Y T5 t8 l& b% g8 w7 l% f, `) Y) u, O. e7 Y" J$ c' a v5 q4 a6 i# ?5 B) J. g! w# T9 Y% |& Q1 ?: y9 l7 N, f; r p! s8 Z) ~% i( t+ u* t- S; t. B$ k( ^, D) U' p! G4 F7 H* c; e" w7 R2 @) b; ^: }" W1 G4 [$ b( z

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

% `" W" q& }% }* r0 P/ G3 O

实例

使段落生出行内框：

p.inline
  {
  display:inline;
  }

; E/ g7 R A& E, Q( V0 f

$ T9 R) T8 x4 _8 H# k) V3 B

浏览器支持

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

5 v2 H' g! D* V

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

可能的值

* \1 w0 f: i( k$ ?" a# j+ ~8 S. h9 v! ]4 o. I( h5 c9 D6 w# n% U& m5 f. [! s! v% j$ L% I( F! r/ `; E. a! a8 u6 q/ |' P" Q& T4 j1 h8 \: D. U& W& D. F( [/ h3 B& N( N. c6 u, s4 Y3 K% ^; d, N9 V, z- F- |4 b1 d# R4 ` o4 W Y) _# M* C1 `: r9 i( z( ~7 s7 }4 Q R* q) H/ q: f9 [" r8 \# D. F" z+ Y* F3 c+ Q# e/ F" V. l5 |2 Q, g0 R, z7 D* m" \0 f3 P: O5 T9 X- j' D O$ b2 K6 @# E7 v& ? }: s8 S% Y% X' B) D. \" M, l. ~8 }5 I8 S9 f. \. p" x& c" N' y: B/ C7 a6 c( q, q) ]7 z3 w1 P+ P1 o2 f3 Q2 @ e3 S4 x3 d% w- v& Y* j, n8 P9 M, I3 u5 Z* v6 g" t4 U% q2 p3 `2 o5 A, j. B( h: @: F) K$ f1 I: j0 P& k4 P& H. _0 i9 [2 B. m2 ]9 O; {/ i& K7 i, R. g" K0 M0 F7 G- X

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