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

happyxp

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

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

# n3 y; I6 x; L8 w3 X+ b- D

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

不

自动

! C0 P, D% \, L M7 @( X% J9 }

换行

: T+ O( c4 k! b: T. M& U, E3 R

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

 

9 [- R. F" r4 i* n! w/ Z

以下是display的用法和定义：

 

0 f* o% g9 v0 F* t- T7 l3 w& B

7 I: ]$ [% ~$ h2 S$ |

定义和用法

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

说明

( d$ F* F# o+ b9 @" `* @1 }3 F

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

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

4 C# D( p9 B3 R6 w( m" m8 b6 J# X, G% w' g+ T: ~" a2 Q( d+ Y2 Z- K6 Y5 n( }4 J4 \& e6 N K4 b b9 Z9 x% r; E' \. C6 a \) L) r# k3 x! f8 u; G: O2 q& ^, O7 y$ d0 C. T/ o& j! v" v6 o3 Z* t3 A

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

; R0 ~0 ]; \# H% ]# [* k# _

实例

9 p0 j' L% P. Z I1 _

使段落生出行内框：

p.inline
  {
  display:inline;
  }

$ [0 E' s5 j* M6 }

9 H2 c) a( c7 i1 N7 W

浏览器支持

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

可能的值

1 G" `7 d. C1 M* K" i' h A0 r/ O0 m b2 z2 n; \3 k( u: R' } T, D2 k+ H7 _4 E( k$ P* u5 _: x1 W& t) c: ]: |6 J) S% i3 x b& L6 L% l$ T& g1 y' c$ U- _ U. D& ?0 O6 r5 R8 z! u9 w8 [2 C7 _: c Q- H6 W2 p0 b( b1 b1 C, r9 k8 i1 I2 h) j% k& U) ~6 G) n9 b: r" }4 t) M& p! }7 J* U! D4 Z' }" A. o/ t, b8 K; u* h% j4 B8 `5 d9 V; _4 l0 q/ y G1 F w: P" t% z( I( x! n: \9 M1 D% A) u( {. z9 X7 Q5 V# E! X) K" j8 z, q% |3 w# c4 t/ V# ]: K. Q, V1 U0 L$ ]8 i' B8 Y4 ^, U- P! [" T5 J& k; a3 ?% l6 {% g; T5 H0 W; x0 p2 E) g- Y/ M1 V0 `- v6 r2 L" d* e; L) l3 }0 ^$ D: I6 J8 N: |0 w' G2 Z9 K0 B% d% G5 L3 ?3 R1 a6 D2 Y5 a' u5 |7 ^# i% b8 g5 _# a: N# A) C' k6 P( S9 [+ t& S _& Y; w* `1 N$ ]) ?& J% c, X" J2 q8 e' C8 b+ i( L( d4 L8 k: \. |) x8 q

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