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

happyxp

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

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

% B) @+ K' ?. A1 @; K' g

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

( F' a6 `4 F4 h4 L Y2 T+ P5 V

不

; w2 e3 d1 a8 s3 i

自动

& c+ z' h, F$ a

换行

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

 

3 T3 C9 H, l+ f7 a$ _8 S& X

以下是display的用法和定义：

# X z9 g" f" D5 h7 {1 k% J+ s

 

5 U4 M% t7 a- H; X/ E( G$ Q' z

, V) y6 z; A9 [

定义和用法

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

) l- |4 F# N( s: q1 v

说明

3 T6 m( c6 c! f/ q0 c6 R; C+ ~6 J

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

# Y* l4 [, U$ G( k6 o

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

" d2 N6 J( Q. p z/ m& l( j, o: j) J) y6 N- z, [, G2 x4 `+ |* O+ \% g9 ]$ l3 y! o ^" M1 x6 y, R. Z5 e) B# ^# R% g! E1 |& g1 W% D: [. T, L. e. I F6 x' j! H! x& @. Z4 P/ p4 c& S5 T! G

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

$ e+ q2 p1 T f* c9 y1 i6 m

实例

使段落生出行内框：

p.inline
  {
  display:inline;
, F+ t, n4 h# i- g' S7 y- N; y1 `  }

6 ^ b5 v1 a0 x' B4 ~) B

1 q, `7 ?5 q2 k3 I! d

浏览器支持

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

可能的值

& y& u: ^1 a! \/ j. M2 ?" p1 D& c$ ^4 b, w. ?$ t: b9 q; w' k' X+ o( L' O$ q, c2 G! ?" U9 F# q- c4 ]; R: q2 o6 q1 h# K+ H- y8 R. _, ] C; f% b) t3 k) Q6 j$ C4 t2 B8 B7 T2 ?, a' L% i% f- i, t- k' t7 s: d. T6 D) m+ |" J8 R8 V2 t( k4 Z" N' {$ F" k F3 a' F8 t/ Y( r6 c, d% S4 H9 Y3 x) N5 \( Z' `9 e" x0 t2 z* `8 I6 i( k1 F( o/ Y4 ]- O% N) V) c6 o0 a$ \( D3 T& W' I: D# E! s- W' ?& r! |& _2 {+ d% x: p: p% v2 k- n/ R. @, X( @. t, e. J1 V# i# [, I6 ?, C4 b; k( n+ A4 Y5 {$ u- v4 j6 L8 x3 F6 n) v2 H8 `3 w: ?( |% X9 w# A1 w- R# `- ?/ S' c' P2 Q& A. 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 属性的值。