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

happyxp

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

5 T) P" H* p! k3 E, W" M# U) ]: L1 Y

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

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

不

自动

7 Q G$ R" G7 X

换行

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

% b: _8 E# r1 p

 

u, }5 n. j7 o* T1 x& E

以下是display的用法和定义：

 

# U% s! }9 y$ d* R' C2 x

+ M: A5 u" g n" x; L

定义和用法

1 l' n7 ]- K4 U* ]1 M7 P8 h

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

说明

( F8 E7 q4 Y2 [+ y+ X

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

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

, G! z; m' J) S3 ` N& T" K4 }7 B+ [* P8 s8 C! {6 C) d ]4 f' |+ b- P# `0 v1 y9 L* w( h( u6 n# y! @& \5 i6 M6 y) ?9 j+ Y+ }* J& @* C, z0 f2 |/ |: f# f7 b9 @7 z# z- q' G, I) r G3 P1 Y7 |' ^! Y0 O6 @. F2 D$ i/ P9 ^0 ~

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

" ]: {' z: g' U" Q7 H

实例

8 p) s) C- f2 E" r/ K. p+ _: }

使段落生出行内框：

p.inline
  {
# G' t! b( S* P, J9 j9 C  display:inline;
2 w1 F5 J- j% @+ M  }

0 l; G: n5 Z2 M9 l6 M+ n

浏览器支持

5 r5 V+ U0 }9 G2 {- [" [' b- J

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

可能的值

. n1 w/ U$ N, y, p0 T4 [2 F6 s; I( A& U( v. ~1 C2 i: D7 i& @, ?; @# L4 k& V f6 c9 }, o1 A0 \: H0 _2 b' q) _1 w+ [1 e% @% F: C0 o- X* F% A- E' l) \* ^8 L$ Y, J) J v/ l1 f9 f6 |6 r1 _4 d4 m( F& l/ H2 P' S$ ^0 k& v' F3 t7 B: b( `) t ^8 q: J1 q* f7 G+ G. l# N$ T! t$ l$ Z. M, E* O/ W7 M" F. L2 Z9 U; v; \- P5 k0 E: C4 m* o5 o L$ `5 \3 R1 W2 q) O# b9 B. T' F$ Y- y5 y& s' L D3 @3 ]1 V3 a& _. o1 O) C0 @5 Q j8 h1 W. [$ `. u! I- Q' W& B: y5 Q: G7 _$ ]- e4 ?" B/ [( g7 D& Z0 ^) ]$ l3 k- `0 N; o8 k) x7 Z4 A+ p+ {& H- @1 p X1 k8 `: y5 m+ P8 W3 p! \6 ~7 p4 G) @; e) v) ^& T+ F) }/ K6 c5 Z* U+ B: X/ Y. {) p# h0 A- p1 I4 v4 ~8 \: S6 j' P) n( l4 z0 y% J: \9 w# [. |" u3 S8 C g% e5 W5 P7 A( d' z0 k }$ S2 K* v( Z! b* D* t: U- q. `: 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 属性的值。