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

happyxp

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

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

, m z/ B; k/ M: ^' J( P* M% }

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

$ O4 R* ^. V, K

不

自动

换行

, ^* P6 M+ R- Q! |; B

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

/ u2 r) @" ]& W' Q

 

( E% o2 Y6 E* n0 P4 k

以下是display的用法和定义：

' ^. K5 ?4 |3 h) P

 

* ~- u% Z( o6 u P

定义和用法

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

说明

) Y3 b9 G6 {# s( J

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

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

9 d' n3 P( C ~0 @/ |& w/ e# ]) s3 N: T5 u1 \& z* D. t6 Y# P# s' J7 q( u, N/ D4 z; s5 N9 b+ m/ s5 i0 J @0 V' ^7 o" e; k7 R6 L5 |: q! V4 f4 J* k \5 O

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

3 `0 s& y @ Z

4 V* e" |! I: P7 V6 }

实例

- i7 V( f2 J; ^3 Z b

使段落生出行内框：

p.inline
* h" z+ D( j' [  {
  a3 o8 q* O8 T# L$ t% Z/ @  display:inline;
  }

3 h3 C U* l" O6 e, ? k

浏览器支持

) s$ T2 X1 X( g% {& I" A: v' @

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

, f' a0 A! ^. 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"。

可能的值

, R' F8 t) F! [2 m3 @2 m2 G( C7 m5 K& k% \, s1 R# i6 Y7 R& b- L+ \1 B) i2 p8 D+ L4 A% H) B2 Z) H9 l/ U7 t( Y) F& W) O& d4 K* {8 U% E( |. d4 A+ a5 v$ @9 X( p3 I) @) J. w- x4 G# }, k4 O6 a7 Y5 j; p2 _1 t2 P% |: z6 \3 k9 j8 X% h* |9 I1 j. H' l; B1 e0 b8 ^ |1 T1 K: e8 e$ {8 W: I) m0 H$ U& @: t |/ J! X1 \4 Z* q: C0 G+ }) G1 C; @5 j: d* q, A8 }& L; v, A3 S, `0 |+ E1 ?" }, U ^+ |# N) L( H5 k; L1 c( ?) I) V4 Y z& W% I& g. u* K+ h' K, G8 q! S) [3 Y' t7 V- X2 T3 C5 h4 C7 ^6 ^* A) |9 y; j: j" `! F- w6 M* t3 `2 j& G5 `! U) v! K( T% Z$ L) y3 N( I, M% |2 } y J8 m9 `% z2 r7 K' e, O- H$ _( A; }# E; z3 q! e$ b; f; N% g# n9 r; j4 A9 {# r& d+ O( n' y# I6 V0 f6 R7 q: U( }! e$ P. W- A' p3 H- j: w5 L8 L* I& ?! A& Q$ p- @! e+ g" O0 s |8 O7 [' q# h2 e' g. i; m6 j

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