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

happyxp

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

0 r$ D+ j6 z* B8 Y+ G

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

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

! [* u8 t9 A- @) f \

不

自动

% c( C! W! r) ?1 z" R. a/ z

换行

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

% F: o/ \; ?+ S# W d3 X2 f

 

以下是display的用法和定义：

 

( ]0 R5 n+ s6 H% I

定义和用法

! H& V2 U1 Q/ Y! Z1 F4 `" B

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

说明

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

/ [" [& ^$ ?! Z$ x6 N1 q* Z

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

) \, P% K/ Z0 M3 t# W. I4 }4 x0 \0 M# _2 j. W" @6 h2 x2 B/ J1 P8 r. O& k1 n3 L8 m7 i' K3 u! J" I2 c! m8 T; V: e5 c& d$ E$ x) ]* U1 X" w# [; D/ b1 T8 {

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

实例

. `9 T& I- c2 Y# [. _$ I

使段落生出行内框：

p.inline
  {
  display:inline;
6 I# y: O, G) S1 M  }

5 S, ~, y# R0 J) t' C! X

浏览器支持

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

/ H1 x3 D" X+ X

注释：如果规定了 !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 V, q, ]4 K7 c1 k: O' W: i6 R

可能的值

7 \$ Z, F3 U4 b: @% a7 i: \4 }3 M9 X: ^0 Y/ j' T0 ~# W6 I% x" s/ C6 K* E; w% m0 z5 g9 i: M5 s$ R8 y1 W) {) W* B6 O" N9 F7 Q" c1 {! W+ W5 B2 K0 T, @% [, h) c/ m: l8 H; t- L ^$ ^' J* Q2 M9 x% T; n7 l0 r# Q4 o. B" J$ o- x; ` P# K! J- B! j3 A0 h4 p8 M+ S& j. p4 E4 e) s t! c0 u+ ]) w9 z0 g+ j9 Y- ?" f7 m# K5 F1 {! a( O9 [4 X% r( d$ H" }" @2 R$ f$ Y2 R% Y% P1 [- Q0 ^; H# m& [6 r% J' n, M0 k' C" O) W8 e. N8 w, a) n3 y9 }. ~8 o( l a3 A& c1 n: a0 t- J, w* D' F4 n1 ?# o- v" s$ F6 L% O! g% y0 e: Y' @. c1 Z9 b, Q$ h$ E9 i- ^+ z) Q! m! Y" j1 b# J/ w2 k# g& J" {0 N7 ?: r. L! b6 M' S1 d) Z- ^' r& \% y7 T# d- w( l4 a) o( |: y0 L7 r: |; S0 f; A! c5 r- t$ u+ F. x+ D/ c. q- e5 e% f1 F: \2 j+ `/ u+ o% o/ c

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