7.Text Overflow | OneYoung's Blog

7-1.white-space

white-space 属性用来控制空白符。

其值及含义如下：

值	含义
`normal`	默认值。空格序列将折叠为单个空格。在需要填充线框的地方会出现换行符。
`nowrap`	文本不会换行，文本会在在同一行上继续，直到遇到 `<br/>` 标签为止。
`pre`	保留空白序列。行仅在保留的换行符处断开。行为类似于HTML中的 `<pre>`标记。
`pre-line`	合并空白符序列，但是保留换行符。
`pre-wrap`	保留空白序列。换行符将在保留的换行符以及填充行框的任何地方。

平常开发中，使用最多的应是设置不换行:

css

.box {
  white-space: nowrap;
}

7-2.word-break

word-break 设置断行规则。

其值有以下：

normal: 默认值。使用默认的断行规则。
break-all: 对于 non-CJK(CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all: CJK 文本不断行。 Non-CJK 文本表现同 normal。
break-word: 已逐渐废弃。推荐使用 word-wrap: word-break; 或 overflow-wrap: word-break;。含义与两者一致，但效果略有区别。

TIP

与 word-break: break-word; 和 overflow-wrap: break-word; 对比，

word-break: break-word; 将在文本可能溢出其容器的确切位置创建一个断点。

7-3.word-wrap

word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。

word-wrap 现在被当作 overflow-wrap 的别名。

稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

word-wrap 也是用来设置断行规则，它有以下值：

normal: 默认值。行只能在正常的单词断点处中断。（例如两个单词之间的空格）。
break-word: 表示整行都不能容纳某单词，则该单词会被强制分割换行。

7-4.text-overflow

text-overflow 用来设置文本溢出之后的展示形式。

其可设置的值与含义如下：

clip: 默认值。文本被剪切。
ellipsis: 文本以 ... 省略。

7-5.ps

7-5-1.单行省略

css

.one-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

One may fall in love with many people during the lifetime. When you finally get your own happiness, you will understand the previoussadness is kind of treasure, which makes you better to hold and cherishthe people you love.

7-5-2.多行省略

css

/*
  display: -webkit-box 将对象作为弹性伸缩盒子模型显示；
  -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式；
*/
.multi-line {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

7-5-3.连字符

css

.hyphens {
  /* 文案两端对齐(非必需属性) */
  text-align: justify;
  /* 必须设置 word-break: break-word; 或 overflow-wrap: break-word; */
  word-break: break-word;
  hyphens: auto;
}

7-1.white-space ​

7-2.word-break ​

7-3.word-wrap ​

7-4.text-overflow ​

7-5.ps ​

7-5-1.单行省略 ​

7-5-2.多行省略 ​

7-5-3.连字符 ​