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

happyxp

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

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

* y7 j% U9 H+ O' B

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

不

2 I; r1 M( d& @

自动

换行

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

 

+ t3 L. ^- w+ ?

以下是display的用法和定义：

 

. f" F! g0 L5 p- x3 ^- W

5 ^- ^0 L$ i5 S& \

定义和用法

7 C) i$ R: i$ b3 J8 q. B

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

( l5 ~& H# B0 L) L o8 g

说明

+ K5 T* `7 r+ h; j- u

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

. n$ C" [1 O- S! b' h% n4 U

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

4 D0 m, \* j5 P" B. j/ O/ w; j$ @' T: K: E: V+ {! N/ F# K0 i, \+ m7 e' X1 p8 G+ J [3 D0 b# G! L( L

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

0 t1 Y9 c+ i, V6 X0 W6 x2 Q5 D" Q

* F% B, B8 a! e U; {: Z

实例

使段落生出行内框：

p.inline
- l8 Y- C, H" \4 p1 U  {
  display:inline;
* v6 z  a5 f5 e% @4 y$ D* R! K  `% b" @  }

- e) W& x# R* I# E& O

浏览器支持

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

. s' n0 y5 b) R5 e

; K( X" ]1 f: U, l$ Y: P' ~3 f# b, {

可能的值

6 B/ i9 u% N( p' l& B0 ], B1 f; b3 p4 Y. j# a# `8 g" F9 C% k3 Y0 C) t+ p6 o; ^4 U4 m D0 r- l2 ]& a. x; [* z9 i+ e% X/ ?0 H" `( B" y: A& `: n# C6 q* F2 O! d- J3 L( V; x9 y* h2 e+ ^) H( T0 j2 D+ y" i Z% R/ J' ]/ I8 E- E1 b4 o, B2 x9 E) }; R' n. c2 a o- }9 V5 V R/ B) Z. Q1 s& d* j. ]( P( q, H3 U) z8 O o* d9 p7 i% x! L1 P2 ] C- W9 S! f+ {2 {. @) L0 k, ? g# x% E) ?1 V6 s* }* ? q% N2 q, h4 \& p$ ?- P* J4 D0 W$ }0 l# i) G5 D( V; a5 p9 y4 @) U7 s, Z; {: J! G# K/ W6 U; W( q. R# h* B% l/ o/ ?2 |7 r. ? o: R& o, \% b$ G. Y0 T6 X+ {* a7 m- p: q! U( ^( B- y# W, v1 P& f% s: L/ I, w; F! I/ _. _7 {1 x/ @ V9 j6 z; r1 B8 y2 `( L# h( I& [- @3 V' _7 n5 \1 y- 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 属性的值。