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

happyxp

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

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

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

不

' u6 |. t+ o4 G/ e+ H

自动

. Z7 J( P9 S* \; a, p/ b; N. X( Q& b

换行

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

$ w, g2 m' p& s* X7 M7 g

 

以下是display的用法和定义：

& n/ F5 z! \* X) T

 

9 \6 d! w) X0 S6 x) I

/ T; M, D' Z0 Y# `/ @! M

定义和用法

: m, j4 O- I& D+ B% d2 h

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

说明

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

1 e( o+ P- A+ }$ n8 d5 D

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

5 \1 Z+ }4 V' ~$ S: a! r; ]4 w" L8 p T0 _' O( f3 H) y6 e% Y2 {" g' n7 c) O7 ?$ e4 M$ e B3 i$ O+ Z+ ?- i% V" k! p c$ T2 c1 h6 B J3 ^! l- g/ \- q9 ]& ~ o" G* ]# `' `* k! t7 [1 c

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

0 d8 o5 t! P, l# h9 e

实例

使段落生出行内框：

p.inline
  {
9 X% Q0 o7 V9 ^4 l  display:inline;
) W- c" u6 A5 ?  }

6 h1 c4 A, y. d- H$ h, j. P

浏览器支持

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

& x1 W/ `6 }; v6 D

可能的值

8 n( ]2 i! @/ e) X9 i: T U! B0 h$ C" E/ B: L+ d; z1 L4 Y; j+ {8 }9 \8 U1 i& e$ @6 t2 ]! ^" a4 r% @0 K1 W' X1 y t5 K2 L5 T4 @$ D) A# f' u% z$ o8 c9 B( K2 D8 f9 ?) S; P0 J, s) f- V k- ?% R" Y* P9 K: Q6 N4 m- R" F+ h. @2 ^- D2 ]+ U" _4 y( A' }7 w% N$ k1 L0 ]3 Z+ n- _3 n- D: O& k X2 l1 x& s2 k% O! W6 r6 L( q9 L4 \( T0 m( u& y+ o- X. {) b- P3 @6 w: ]1 h, Q& N3 Y8 q% W( p* e Y* r$ M: b2 m- P) L( I9 a3 I( B! N9 a4 D# U/ s" w7 q; c4 ?2 i) ?* I5 X( D: s% \( O$ q( a y. F" _9 o5 f0 f# |$ e2 X6 t7 j* K7 a4 \7 g* a$ H5 ?8 ]2 Q9 b" n% F1 G2 r7 p t, f( C w) @( [+ e, Z4 x5 N' ^" X C; {( ^& e) [- ?4 {: \3 s1 \2 w9 o8 a# O! m7 A. B: W' \+ u( ^

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