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

happyxp

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

2 S# r/ h9 X0 i. Z' Y! I

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

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

不

自动

0 c1 b1 p& c# f$ V: T

换行

; E; O! a) W. c7 m2 c

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

 

以下是display的用法和定义：

! m& D2 u4 k% Z2 j

 

' B+ v' K% K# P- W9 u- {+ b

定义和用法

. E6 l. W) W4 |; ]% V# f

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

说明

q/ y7 m1 `$ h k8 x

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

: L5 o7 O: J& Z

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

9 I- ` a. \- e# o& E$ h; Z" x+ K: O% k3 c$ E, ~5 v; j0 E2 M& i1 A- a" I/ o- t3 W8 D- |% b, n' E7 K6 e7 ~" |( f) N* m$ q e$ K# J4 A( C/ H7 C6 P. ^( T. t$ g. a% d4 ^* E. I) }6 R3 `+ ?* r1 G" {. {) t, R/ D

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

实例

' f- J q, r/ ?3 q! B

使段落生出行内框：

p.inline
  {
/ j* T; q' h* S  display:inline;
  }

% ~6 d! ]5 U% s7 t

) [. r! U: ~& V9 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"。

可能的值

9 q3 A6 I7 b2 A3 N. [: _7 A2 w5 D& Y I, w* V8 `% X# g/ L/ M) K! u2 [! O3 t4 F) B+ z* V% z' N" b1 R8 \! d$ S6 q1 Q& M" G" c9 o/ S& J6 x; K3 [* K" k( l1 T4 ?" |: d* w8 y) q4 _* o) N1 L$ H5 N3 P; B4 n0 j- X9 S1 A. v g6 c8 _& b4 f- y, Q/ ^: q8 ~+ h, k) z @' b! F0 ^8 O5 C- n" |" W! _9 K: P i, b0 V. B3 q& t' r3 `& G2 O2 T1 O% x" {" s( h5 D: |0 i% V$ j$ S: o$ N& s: I# A8 m$ ], t% x: Q& [, j0 k: d" e" Q- |' N& ~' u- n' A( j S, U& k, W9 J$ J3 y) y# F/ q2 T" ~% F. R+ m/ l3 o) M5 L4 E2 `( `' }" M& C- l4 o Y6 N9 k/ n; [ e( a. H& O5 S4 S0 h. s/ J, u* W, g3 {& ~" D, n, d3 I/ [2 a7 J! n5 G3 A7 X/ m: F' v% k9 B) y& }; K; g! X8 `3 P2 S9 O! y# i% [$ N# C4 ?+ K2 P# w( K1 K8 Q" g/ J* V( s% g+ y2 n- }* R& J, ~- T2 N0 l6 |0 c% C% y% w! Z" e ^9 Q5 R* K

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