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

happyxp

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

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

9 M! _9 b" i- @5 D$ p- f; S7 |- \

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

不

/ t. x; j- s8 [: @

自动

换行

& S! d! M' P! S ]

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

. G, s% ]+ h0 ]: n- }* y

 

! Y! O* b2 H7 `

以下是display的用法和定义：

 

. @, \1 ]. b/ K

$ [: G8 R. G, h! N+ B' {: z1 S' Q

定义和用法

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

! e, b2 R q, u; D% G

说明

) ]7 @1 a+ n, r. \

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

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

! K9 W: M+ S7 C0 K' y0 V8 M: C9 y3 b5 K, X$ ?8 g9 I& b4 E& i" I$ U$ w' X( e/ z$ T5 i# I: a& k; A- w0 S4 H" M$ x7 p1 D( [$ b, I4 p' D. C3 Z% o6 U) E4 T( [! m# [6 x) U1 |/ i' l, |2 l8 C4 A v' x8 Z i2 ]0 ?

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

3 ?2 u' B! @6 L! f7 u# V

实例

使段落生出行内框：

p.inline
% D: g  b5 O2 o7 j' I: n: N4 Z  {
  display:inline;
  }

8 `+ ~$ M+ x" G# p6 v1 R o/ }

( u% i6 D) q( x0 C+ _. G1 n

浏览器支持

. u1 @3 l* f3 t) Z% {

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

. ?" O& k t( i/ t/ A

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

( {7 a5 M$ ?& k3 N

可能的值

' P6 H6 T+ O- F: e2 N6 @ C, A* N/ m# B) r# C, M* E" f0 C' k8 L' O, y( _9 l r% y, k& u+ P1 b4 N$ A1 b& s+ _ F$ r/ G- q9 P: o1 Z& }: ^) L7 y# `' d6 H! n: q* r! J4 m5 C$ z* w6 a V% \1 P; [' y: R5 B; B5 s9 V# Z! M# D$ F3 K& B6 G9 m4 r: l$ M$ y$ \) L% I5 b. T) C) g. n U0 y' B$ |- R: d" j# _9 |4 o% q, S# J1 D/ `2 W8 u# O* E# }1 o9 f1 L0 j; M1 f' N, C' N% n) ?0 T% M+ ?+ d8 O4 V" x$ \# a: j1 O& q6 a0 R: L0 y. [$ G( \6 R7 ^5 V! G6 B* l- N' l. W3 O" {1 Q! A. K: G8 i3 P8 S9 f, K {7 i1 ]- L$ I" V5 D8 Z2 m, F3 G; Y0 N& K/ n" |; S1 G+ \/ N: S" U9 l9 f6 o" {) C n7 \, h4 b5 {: q+ o* M! Y) s9 U& V4 k8 D6 ]: T. B+ f8 Q' o% f. {. F3 J7 @4 i! F' P7 g3 [7 h$ K Y9 U# O8 { Y0 v, f. \6 L1 w6 J9 K6 n* b9 r2 M: M c3 c# d G# ^( d0 T9 [. G6 y0 |6 r# Z. |1 f; I$ \' O0 N# ^( r0 F. [3 M& O9 @6 Z* O5 m2 y! ?

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