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

happyxp

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

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

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

( J. Y, W1 n# ^5 @ b3 ]9 ^; j t; |

不

自动

& ~+ n+ [( M" O% u

换行

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

5 b9 L0 h% O# \

 

以下是display的用法和定义：

 

2 ~( Z/ M/ Q: v- T

定义和用法

3 ^) T) X2 T; r; B; R

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

说明

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

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

: h: K+ l7 o3 c" D- [; o+ ?0 {& W, u% ?, U N7 V! O3 N" F0 `: o3 s. h2 I0 Z! Q; t' X" x7 s2 f1 v) C# @. z m7 i& R& ~0 X6 {# K! v& Y4 l2 C3 w" C" c K" O. Q7 G: }* W9 ~2 ]: t9 h, `* Z; E

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

实例

使段落生出行内框：

p.inline
  {
  display:inline;
4 T7 t; P2 |1 O  }

浏览器支持

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

$ v. T' ]' R. f! S0 [4 c- s

注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

" f; ~: o+ m* ~+ B, m

B' q/ r: D& |5 M/ E2 d+ e

可能的值

R+ c/ O& B$ n0 R$ |3 W) W1 z1 B' O- b( Q9 D1 C5 J8 t7 v ~$ _8 ]4 ]. O$ f7 p) d9 l' U( n3 b$ P! l5 X# H2 H" D( H" C! k1 d% R% e- P1 K0 _* K! E) n( F/ p, k k7 c# S% ~# a/ E. e* }8 i: F' @/ M1 w6 [2 Q& o; J% g" o- w! x. p6 C0 x2 K- ]1 ^ H$ M4 U+ o J3 ?* B h. T8 B9 g+ N1 ^+ ^! ~ U% p) D$ _" A- Q4 j/ E+ ]2 S. p! l" v2 b) {* K3 G, m* p: T# v% Q+ J4 @3 o1 q# E- Y4 S* c6 P* t! R4 I: }; T. M: D# b$ r V1 Q% z$ `& I7 B" ~. _. E& s7 ^: ~6 `8 _8 H: B. O- u) F) l: z% W$ a/ T' f" M- x% E; h, k! k: i) \/ _8 }6 b1 C( p& u$ B3 C( y: T! r X' |' F1 i; e& q1 ^% r0 C) S& \3 K; b7 \% O! A9 H) ]5 `' _+ t9 u* s/ ^6 e9 K l6 `/ e' K. u, W2 Y3 x* N" t6 ^$ P: p9 V H l$ \8 `* F6 b" w2 _1 @; G0 L2 m, K" r4 h- x. l8 b" }6 ~9 D% q- [# ~! [7 f2 [8 f; G4 e! P% M3 R3 `( ]3 F" N8 t$ I, g: L ~+ e

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