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

happyxp

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

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

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

6 l3 g1 @3 m5 g" q) z" Q% K

不

自动

换行

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

 

以下是display的用法和定义：

L! X' {4 X0 W, d

 

: U. S3 f+ ~/ h4 G4 U2 T$ Q5 \

8 P; p3 {2 Q9 g# g m4 k

定义和用法

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

4 ^5 |* Q0 d U, {$ ^- a8 d

说明

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

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

0 O2 c& ^5 e' N: e; T# Q7 g# |+ D6 L. u, E4 g% K, T8 o5 E. g2 r" L8 P3 U6 ^- Z/ Y* U0 ^; l' U- b# t4 f7 ~! N& `; k' f8 K8 D) |% R6 O& m1 N$ E

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

: k# w2 k' ^3 b3 s) R# H/ `

0 j( ^2 \ h& x) |2 O' u3 m% G

实例

使段落生出行内框：

p.inline
" O% E0 _9 F0 \8 ^  {
! s( d5 M+ k8 @+ i, z5 w  P: U  display:inline;
  }

* r# {8 ~. u* R# q+ Y, A

8 R4 f- K6 Z/ y* S1 o4 i: s1 E8 G

浏览器支持

6 r2 @) U" X# ?; Z2 y9 K) I

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

$ ?% S7 B, v. f ~

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

4 `- e$ |( z) j1 {) r

可能的值

% N H( r7 H) \$ j+ g( B( s/ Q) H% y* v r" F0 w, i; k! T, u& s% q- B' t- P5 b4 }3 o- x: z+ m+ s* J: A6 R1 M1 Y2 x9 P& A, w0 ?+ V* U7 A' v9 q% k' J( `' f6 r$ s m# \9 `3 _. ?8 S$ C9 E8 x1 n! o5 m3 O' h- O9 X& `- h' L; z, e& p! s1 A; ]% m: B) v- k- S/ w- r6 d8 b$ b/ H1 v" P$ c( A+ O, u. |- S& T- N* ]- i$ m1 Y9 K. A% _5 D# o% r6 _5 S8 Q: g; a5 l6 `1 A! I( G+ x9 T2 \5 Q2 h( N8 ]+ n; B. \% k; `7 L& d. r8 L* X% T/ l) y8 j9 ]8 r! f- R5 s6 N" N2 {6 N1 { p9 t/ l' G% Y0 L9 ?% q9 M6 z1 q- h1 ~$ J7 |, p) P) O# c+ P ?2 h/ \4 J7 @+ n4 k+ L7 U7 N: S$ B) W# w) V. ~, }: D: k$ ~' o$ Q+ w. c( v0 S1 Y: w' u: H% |$ W: X3 \0 C* d$ I0 _: z( o6 Y& z& m6 j/ y3 Z# e6 I

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