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

happyxp

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

% C$ ]2 b" o/ M+ c8 _. z S2 t

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

& c0 a5 E1 l7 ~6 C6 d- {

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

, H7 Y# ^) U' ^5 N1 y: f1 s

不

& w: w; D0 c/ y' [+ e* O" u" X8 q

自动

换行

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

 

以下是display的用法和定义：

 

定义和用法

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

说明

* C9 R: ~) n; H

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

( ?: [+ j( G) N0 a

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

" H6 g; ^4 x* j8 ?7 y$ ]8 E2 J/ p: D/ K7 {- t6 _4 z( _ R8 f. @7 M2 a0 t. z! O' \3 t+ v+ L }3 r; f% N0 k/ ?, M3 H/ E. Y' Q6 Z7 w4 \5 q& M. F" R [& ~- `7 J& A* C9 \ E3 `# S1 t* Y

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

实例

$ [: h+ d4 T, ]. m& c) [7 C2 s

使段落生出行内框：

p.inline
  H' @; G- d  t. w$ s" b% W! x5 E" w+ I  {
4 ], J) B, c! o- W* m; A2 @6 |  display:inline;
  }

' k. |8 ^9 Q& I1 S8 F

浏览器支持

. @8 l7 D. K$ e) r; n

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

, k) H: H9 N6 @

可能的值

4 O! t4 @* t9 ?' C3 i5 Q9 g! @7 G. ?1 V7 W: p0 j# I; j" ]5 z; S! v+ C6 D2 R2 {8 T" G, H2 K: O6 L3 d# t. _( a; X2 f6 ~7 M* T0 H. T% v/ B+ l' A: `$ V2 o9 O) ]) T3 r" x4 B7 C. D7 P: {! C6 ?4 g2 A4 m9 d. b: z2 x% \ a" g2 \, V8 L. J4 E/ E9 G+ f# P3 p" {* [0 k: `3 q# g, U5 H0 q1 I, u5 Q* L. [8 M4 @" O$ H* g) g$ n( n) J. K+ A' E+ \9 X* d& Y8 H, J7 h }2 M& F: s! p. ?# g. ~8 K4 o' D X- i" M5 _! f9 n& r/ h) u# v0 R& R4 E& x1 L g; Y5 ]+ F# ?- p2 Z) } m$ ]1 @5 J+ d9 p: k( e4 z9 n) F- |( R1 r' J" f, M- _1 p2 L3 d" A# @9 T8 f8 V) @$ l, S( h* l6 W8 a/ |3 K" y' O% u, \! Z5 `' w( m$ E3 C6 b5 E0 J( u/ o7 V! s3 b7 |( L. \/ o+ K# Q- v' d: i# A* d5 }6 P) |: |8 d+ ]- p5 V9 H [1 l# d ^+ g* F8 F5 Z

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