[关闭]
@yangfch3 2015-09-20T13:51:40.000000Z 字数 752 阅读 2716

网页中的文本排版

CSS


white-space:空格的处理方式

语法

white-spacenormal | pre | nowrap | pre-wrap | pre-line
默认值normal
适用于:所有元素
继承性:有
动画性:否
计算值:指定值

取值

normal:默认处理方式。忽略行首空白忽略连续多余空白,其余照常 换行 排版。

pre:即全部严格保留原格式。

nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。

pre-wrap:不忽略行首空白,也不忽略文字间的多余空白,

pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。与normal一样


word-break(wrap):过长单词换行

一连串英文字母连在一起,视为一个单词。单词过长,超过边界,默认不换行,会超出边界。

使用word-break方法折行:

  1. .demo{
  2. word-breakbreak-all
  3. }

使用word-wrap折行

  1. .demo{
  2. word-wrap : break-word // 内容将在边界内换行。如果需要,过长单词内部允许折行。
  3. }

一般中文不会出现一个单词过长导致超出边界的问题,一般是特殊要求,或者文本胡乱输入长串英文字符才会出现超出边界的问题。

CSS3中已经将 word-wrap 改名为 overflow-wrap


text-overflow:文本溢出处理

当块容器 <' overflow '> 为非visible时,定义内联内容溢出其块容器是否 截断 或者添加 (...) 及 自定义字符

要使得 <' text-overflow '> 属性生效,块容器必须显式定义 <' overflow '> 为非visible值,同时显式或者隐式的定义 <' width '> 为非auto值, <' white-space '> 为nowrap值。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注