CSS 将 DOM 树转换为由矩形 Box 构成的树,并通过设置这些 Box 的属性来改变其位置和大小,描述每个元素或文本的布局。这些 Box 分为三个级别:
-
block-level
Box:display
属性为block
的Box,比如段落标签<p>
; -
inline-level
Box:display
属性为inline-block
的Box,它们就像一行中的单词一样布局。它里面可以包含其他inline-level
的Box,也可以包含block-level
的Box; -
line
Box:一行单词就构成一个line
Box,这种Box是自动生成的,可以看做是inline-level
Box的容器。
溢出、折行、断词是line
Box中常见的问题,设置这些行为的CSS属性包括white-space
、line-spacing
、text-overflow
、word-wrap
、word-break
等。 下面几小节中详细介绍这些属性的取值与对应的行为、以及常见的使用方法。
更多信息请参考:W3C 标准:CSS3-Box
line Box
下面的小节中介绍的CSS属性只适用于line
Box,那么什么是line
Box呢?请看下面的HTML片段:
<ul>
<li>The first item in the list.
<li>The second item.
</ul>
ul
会生成一个block-level
的 Box,然后为每个li
元素生成一个block-level
的 Box。 而每个li
的 Box 中有一个line
Box,它包含了两个inline-level
的 Box: 一个用来显示“ · ”,一个用来显示文本。
如果
li
产生了换行,将会变成多个inline-level
Box,如果在ul
中间产生了分页,那么ul
会显示为两个block-level
Box。
white-space
white-space属性描述了如何处理空白(空格、制表、换行)字符。它有5种取值:
white-space: normal | pre | nowrap | pre-wrap | pre-line;
-
normal
:连续的空白符会被合并,换行符会被当作空白,宽度不够时会折行。 -
nowrap
:同normal
,但不会折行。 -
pre
:连续的空白符会被保留,换行符、<br>
也会引起换行,但不会折行。 -
pre-wrap
:同pre
,但是会折行。 -
pre-line
:同pre-wrap
,但是连续的空白符会被合并。
合并的空白宽度由
word-spacing
属性设置。
word-wrap
只有出现空白字符时,才可以设置white-space
来折行。如果需要切分单词,你需要设置word-wrap属性。 word-wrap
指定了当一个不能被分开的单词太长引起溢出时,是否允许中断换行。有两种取值:
word-wrap: normal | break-word;
默认为normal
,设置为break-word
后,当单词太长要溢出时中断换行,如下图:
word-break
word-break指定了怎样在单词内换行。有三种取值:
word-break: normal | break-all | break-word | keep-all
-
normal
:使用浏览器默认行为,不做任何断词,但会优先考虑在空白字符处折行。如下图。 -
break-word
:与设置word-wrap:break-word
的效果相同。 -
break-all
:可在任意字符间断行。此时不会优先考虑在空白字符处折行,而是平铺所有字符,需要折行时断词,如图。 -
keep-all
:同normal
,但 CJK 文本不断行。
text-overflow
text-overflow指定了溢出的内容如何显示,只在inline
方向溢出时起作用,有3种取值:
text-overflow: clip|ellipsis|string;
clip
为隐藏溢出的部分,ellipsis
为显示省略号,string
为使用给定的字符串来代替被剪掉的文本。 其中ellipsis
最为常用,通常设置text-overflow
的同时需要设置white-space: nowrap; overflow: hidden
:
相关推荐
《CSS3实战:开发与设计》书中所包含的示例的全部源码。 本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络...
CSS3中的box-sizing(content-box与border-box) CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border...
<title>CSS控制文本溢出_网页特效_javascript特效_css特效-ViewCss网页特效网 <meta name="Keywords" content="CSS控制文本溢出_网页特效,javascript特效,css特效,网页特效代码,网站制作" /> ; charset=gb2312" />...
CSS--文本溢出完美样式,CSS--文本溢出完美样式,CSS--文本溢出完美样式
Short and deep, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase the ebook edition of Flexbox in CSS, you’ll receive a discount on the entire ...
DIV CSS布局教程:应用ul、li实现表格形式DIV CSS布局教程:应用ul、li实现表格形式DIV CSS布局教程:应用ul、li实现表格形式
CSSBox CSSBox 是一个用纯 Java 编写的 (X)HTML/CSS 渲染引擎。 其主要目的是提供有关呈现的页面内容和布局的完整且可进一步处理的信息。 但是,它也可用于浏览 Java Swing 应用程序中呈现的文档。 渲染引擎的输入是...
css详解box-sizing.zip
超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行...
今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...
css-box-model :package: 获取有关准确且名称充分的信息。 每当您使用您可能都想考虑使用css-box-model来获取更详细的盒子模型信息。用法 // @flowimport { getBox } from 'css-box-model' ;const el : HTMLElement ...
CSSBox是用纯Java编写的(X)HTML / CSS渲染引擎。 其主要目的是提供有关已渲染页面的完整信息,以供进一步处理。 但是,它也允许显示渲染的文档。
cssbox源码
利用CSS伪元素 :before 和 :after 可以在文档前后插入内容而不改变文档原有结构,再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子: 1、利用 :before 和 :after 添加背景,比如给一段文字前后打引号...
需求要求展示两行,多余的文字用三个点替代,于是用了这几个不太规范的属性 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的,一到页面上居然没有反应,和...
Box-CSS-Framework:Box-CSS框架
由于qss不支持css3的box-shadow效果,故而该工程中,采用类似android九点图的方式,把背景图截为9分,即4角4边一中心,并把4角4边重绘于待修饰的控件的边缘,从而模拟了box-shadow效果。
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed ...