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

happyxp

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

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

6 L$ h' s( V1 J3 O4 m( l

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

不

9 w+ F8 C* _6 n

自动

Z9 g f7 C" U, V C2 Q

换行

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

& c3 `" m) q9 ^# m0 f+ M

 

以下是display的用法和定义：

 

定义和用法

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

8 D# g& p0 J! i: n9 U" {. m. T0 n

说明

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

9 g+ v" r# u! i2 }

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

; S1 P) J7 [8 A F( ]; N# X! J! L. F4 P$ \. j% [( o0 D$ e% m! k2 a7 D( |2 Z0 N, r) S5 _, J3 @) ?3 P5 m' I$ f0 M1 a- C* | h3 J" G' r1 G) v. i! z( t, p2 ^( q) ~$ y; C7 s6 x& x0 R* D( \, R6 a& Q# _" C- @+ b: {; t0 T- b( q3 U* ~% _6 K3 U* A4 C1 K! m# P' |! G D; Y$ F

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

0 D' U+ u& m. j j) x3 ?

实例

3 `/ M% t1 h" l6 K1 K

使段落生出行内框：

p.inline
  {
' z1 s. h4 D; @9 ?4 u# H  display:inline;
+ L5 N$ v5 |2 P/ H  }

浏览器支持

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

2 K, |) _0 y* k3 G

可能的值

% m( A- o# c9 _5 A: F0 q* a: @ g. T5 v2 w" `% b# w+ p+ p! g3 W/ d8 |# {% a8 D1 S q$ T8 f/ T. Y7 l- N" M; i( i5 h' @3 Q; h& X [9 |1 B G1 I8 B6 ^& s% P- Q2 y, Q& {1 b! S+ H" K) ^$ |- E4 W: s* z# c: @# R3 K9 H) e& o/ R- |5 V0 F) A3 d& O1 }0 |9 D. o: y* F' U& T7 |0 ~" K- ]! |6 L4 A p% I: d9 b) c8 U* W! k* l3 |, @3 d# U; L; e x+ B8 P4 ]" @$ t$ | l) u" V2 a, l. @9 \4 k* I: S: m: D/ h( _1 S$ t1 w2 Y4 p0 b+ _$ j" K& w4 O' ~$ a& h1 z" I+ C' [$ M/ f- N: T% x$ w. d9 o5 A1 t$ C, ?, G9 Q! t2 c) c% P6 G; F& F* M3 y( Y1 w- I" z) O4 K4 \% Z. k, D3 r5 p/ ^' ~9 @. n! Q( o# s8 t, w8 c& v4 n; S+ J2 U4 x, M- F' a$ L$ ?- ?1 B9 I& }. X5 @' Z6 Q, a+ J& @+ J1 U; c. k! P, M$ s( y. d" f! `$ B6 e0 h) f3 ~$ `7 O% j1 z8 \) f" }, B* C, J4 V# x s! n {# S ]0 \& e9 y# p! R% W, o. p% ~ s& G( F3 d2 _- K$ l* }& d

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