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

happyxp

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

; \# G6 Y+ c0 F' C3 l

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

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

不

自动

$ \: d R& ?+ {/ d. L, ?! x

换行

. H$ t# y- _+ o7 C, L% [& I* O

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

 

以下是display的用法和定义：

% [) N: E1 I! }- p

 

- r7 c7 Z2 N* J7 l0 o- v# g/ O

; q0 k2 H4 x M6 D2 `

定义和用法

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

说明

6 L# ^, C6 u" E l) ?: F( N0 J7 a

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

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

& Y! m. E2 c0 R2 j7 M0 s% [$ l; T9 o y2 }, P Q+ D( W H/ L: U- W# r ?& s; J, w# D6 a* ~% e3 P/ h

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

/ q8 K# Q) M8 M) i) m+ X

; h4 r o" Z8 o1 P/ K# G4 P; L

实例

使段落生出行内框：

p.inline
/ g+ W7 A# k( _/ b7 o) ~/ v8 T/ G* {  {
  display:inline;
  }

" s# u, g1 o" J( c) `' }) c

浏览器支持

8 R2 v) [ [$ a6 t3 s) i( N

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

" y7 c/ ~6 O) w/ @& \

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

$ a6 X- [+ Z6 L# C+ b8 f

可能的值

9 H. N: h9 j; e7 @( [( W- q, r0 f y e8 W7 \' | A* r' @' H, j, `$ O. M- g! V6 F. h3 [) Q r/ t, q9 y2 j. o- R1 J+ W. X0 w0 V- T1 @. c; ?% S% a1 Q4 L% n& I, n u8 z3 W- S9 U3 t2 q4 U" j. p2 y! L! G3 ?2 w, f& E2 t) O( u, |$ k/ j& y6 O( ~; f3 X) c F! u! o2 U O2 g8 U( M: J& R+ E a( T; q D9 a: f+ ~( f9 l: f6 f5 n ^; J' G3 t) W- R# m8 W4 M+ ]6 r! W( r, `9 w. k( w# [- d( k$ v5 h; k* e' H! ]0 Z' y# h( e8 Y( e, q5 H9 _/ o+ j; b; [& I0 y9 k% e9 O0 K; j# v) y3 V0 i7 r" i T2 G. x6 Q) E( x9 R" N( M' C' Q! O0 {1 }6 d3 \4 f: |9 @: w9 b# [) w$ _7 {% E1 ~+ Z5 S) W5 u* X% n5 O" \' O, u% A# Z- O( D. B3 P% _4 k" D4 l H% _* \6 @5 p7 a$ U- I0 P' [! s l% v, [4 |. U S8 E1 _' q9 c# r( y& Q: f0 {. f/ B) a1 m% @. g5 T' B( h

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