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

happyxp

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

1 v9 R/ d; [' X

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

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

不

3 `1 q% s. A8 X. {9 ~- |

自动

换行

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

 

以下是display的用法和定义：

 

& s7 U l5 v5 B1 u, ~

( F% H. ?- a8 t

定义和用法

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

说明

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

1 a$ q5 j9 e/ w4 X3 }$ ]

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

/ t6 b2 I5 N7 C; M) F4 X4 f2 P' g0 o: r* h9 P! H; h3 K2 T7 |. X+ B& o% [/ D# L& y, p3 F& W d& d8 Q1 v! C1 e! z- h! c& J4 j8 L% W; J. X( V7 l6 f/ ^% B# X3 w% K- a6 m- t

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

实例

2 Z% S/ O! a3 b# c3 \7 p

使段落生出行内框：

p.inline
  {
  display:inline;
  B% F( S+ q* T. K9 t2 a+ Q4 o  }

, c/ E6 ? g1 J$ S; _+ o

浏览器支持

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

' P- f' ^* O+ E4 ` {$ F; p

注释：如果规定了 !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 N% J/ h. a1 F# P" y! C9 x5 t8 i) I5 y6 w4 g! r0 P( i* q3 i. [0 z2 E# j. h0 W) I& ^3 p' m4 a1 z3 h! t8 r6 P/ X1 j( S$ r, u& X- t7 Q! F% P# R! B1 K5 C5 u6 R& N8 Z+ n: C1 A) D+ ^% ^1 h7 P" ]* @. i4 C2 u( \# v. F9 M/ A4 G- t$ u) i4 H" P. D# |5 \* M' w2 L4 ~3 I7 w) c5 p5 f( T7 Z# ]! z! E" b! T2 d8 b5 `3 w' n. A8 x d8 }: f' C0 |9 j W h n7 T7 z+ X8 }( g& |) M% U1 h3 F9 H# h# g/ j' h8 y8 f- R/ R8 Q! w4 U- v- F& O9 T c9 m: k% u. _' S+ j# O/ J) \* N2 r* `1 D, I3 n$ c2 c* R- k T+ Y- H$ w4 t5 u; Z# P1 [) P7 K; z6 q+ d* x; [9 x% w" \1 u5 ?$ H' k9 x1 p1 E& \% z' C/ M7 Q. U2 V/ P( u. f+ I0 b/ B2 m% ^; w; T, [6 {1 y( k* K1 t+ P1 o$ G& S- D4 ^, E8 x; b" r3 @% h7 r8 B( n# v3 \

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