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

happyxp

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

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

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

2 w" U8 D* w+ [9 p" p2 u

不

* [* e- M' b) T `% v& z

自动

8 m; w% T, H( r- w4 w# k3 P1 M; G

换行

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

 

以下是display的用法和定义：

 

$ s, ^2 t) e& e! |! b( D6 F

定义和用法

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

3 B( W0 Y0 e3 _" o, N- Z, V

说明

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

. U1 X8 B" c8 [4 H" d

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

, l, U, c; C Y% s2 p: v6 k0 g- R3 I% ]% P7 `5 \2 G8 J# M3 C: d! E" V" m- D2 P7 u0 E& c" U. n. p% G+ ^1 t" M, V2 e2 F1 c7 l" E( { c0 T; ^% X$ P/ m3 o. _( n8 P9 b9 u

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

% v) b) A$ G2 g5 ?- l' _5 G: X

( k$ p& E1 i4 ~0 K/ v% C

实例

使段落生出行内框：

p.inline
3 |2 F/ N! M' h0 |( s  {
% }8 ?5 b: q* W3 a/ d  display:inline;
7 F4 |( y, H/ }% T( n& e  }

* U0 P' D) J0 _& N& [

浏览器支持

( f9 [# X% T7 p- m/ T1 r8 l

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

/ c* Y( U& j3 S' x# ]1 i) ]! g

可能的值

7 A7 W8 s# V$ u$ S% {: I) J# {2 n6 i5 W$ x$ Q- a- E8 u7 v/ i' p7 X M' C3 ~0 b! u5 ~, r ~' ], N( a! W. G$ Q, }" b6 M; @1 s: a+ b* |6 _% D% k1 g# `9 t! b- ?0 [- M( [% ~: ^( X7 T" d, a3 z {2 \& _) L4 o4 B! T7 a% i' F- |! ^1 m+ @' x3 z( \, p: J( C I$ U# M$ Z+ [. H( l2 R5 T& T( n. s# H/ K* a- m2 i3 O' K2 I( V4 U2 ?( F8 s3 k7 F; [0 N1 q& F9 P" Y5 q9 `* r* U7 ?2 m" g$ U+ ~) ^' `2 H) H- ~6 i1 k1 H0 P; T. I \ b& M5 r! k7 j% V7 [8 J! p. a3 S) E; v' u0 ?7 i/ i5 j# u! P2 n5 A% i; t4 X# J8 G6 W# v$ ]0 u" h9 y3 r* Y' d j8 `- S* V- {! S0 W* B- }) t- l% [8 a! I6 m+ @+ A( W: [) e7 M7 c; n+ M* P4 |6 l. s7 l! W+ d8 j

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