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

happyxp

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

8 s2 @) u- Q3 T: B: w: M

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

f, V; Z% ~1 g. F6 I' n- x( c

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

2 b# `+ c) u0 H+ D/ i. j, R, Q

不

2 Z- m) F9 v x% ^' V! p1 v

自动

. J# a8 ~8 E- u4 b- a( s0 c

换行

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

9 f. L7 Q8 V; r* t/ W

 

2 P. C/ @- Y/ V. Q2 \% C+ r+ ?: m" k

以下是display的用法和定义：

 

9 c& [4 X# `0 S P& n

定义和用法

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

1 V3 ~$ P( Z2 G) H1 H4 X

说明

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

3 o& C- U+ @$ H' Z0 N

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

$ Y/ S2 Y) W2 y* i6 N& Z; t5 R/ g& i0 C) D4 b: r, ~7 r3 I8 L/ Z3 H7 Y! J5 g4 S5 F' }# G) {* |2 e0 j Y5 j& s4 r8 |. k1 [* c8 v; x# g+ f( m0 c0 J) c" d5 J/ j) }! O$ h y3 C- ]3 v% p _- a4 W: }4 d+ G( Q* u$ y* ?" ?

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

实例

6 `- c# S, {0 Q* h A2 S% ?8 ?

使段落生出行内框：

p.inline
  {
  display:inline;
/ d0 L2 T, j' ?, B$ v! X- Z9 ~+ `  }

& b- [( O" P7 e* U7 a

浏览器支持

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

( s) o2 x- R5 f8 y. p( G

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

8 R6 c7 B% W& i5 S/ O/ w

可能的值

+ {2 C8 {7 m1 y+ ~3 a: C: `4 H, k4 r- y- {1 n9 A' m% t) f @. X* R2 h& |% F. b5 v- y, G- T3 I7 Q M( N$ @% ^- Z' |% ~) `* e4 x% q; C+ L( g; z. O8 q6 S) N* H% @; h1 \* `1 k7 w/ c# F9 c" w4 {' {: A8 K, r* a3 S: P# `. M+ F2 E7 U; V7 q6 \+ w! M9 U! s$ h6 P' e% {5 j% v: W' Y$ f7 y+ Z+ R) Z: b5 g- a m9 r! H/ i# U3 f; q) b& A/ I3 e8 f6 E/ h9 E; P- m9 [5 F8 w6 B$ G3 ~, R' ^3 N6 L2 i. Q" [) |$ q: c5 r0 S$ \2 y& H( g% z8 k H7 g1 H. z, \2 a% g2 [1 f) K! X0 j/ M' k( E( ~4 V8 x; Q) P# S1 x) f j' j! i) P L' j3 G6 Y, i" k6 f/ [* L7 Y( b, S) f: Z/ Q0 u' }; h" w" ^' ~5 Y- x) S9 S0 R8 U" e3 @4 u7 r+ g9 {; X% F2 ?* X# N' z& d$ I" T, Y4 \! E* u6 O- [7 i* @# \ k/ l4 o4 g# r- ]7 G. ~% L X6 a* A/ ?- f3 q6 N3 j9 ?1 {0 b& P& N. p ?# s; W6 U# ~! |* V& y( X1 g C! _8 D. M% s4 T

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