css 文字换行和超出部分省略号

css 文字换行和超出部分省略号

文字空格与换行

当文本溢出父级 block 元素时, 文本会换行;

这个特性是通过 white-space 控制的;
它影响浏览器处理空格, 换行和 tab 的处理;

它有下面几种值

• normal, 默认值, 连续的空白符会被合并，换行符会被当作空白符来处理。会受到父级 block 的宽度影响, 而换行;
• nowrap, 连续的空白符会被合并，换行符会被当作空白符来处理, 但文本不换行; 且不受父级影响;
• pre, 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。不受到父级的影响;
• pre-wrap, 连续的空白符会被保留。在遇到换行符或者<br>元素; 会受到父级 block 的宽度影响, 而换行;
• pre-line, 连续的空白符会被合并。在遇到换行符或者<br>元素; 会受到父级 block 的宽度影响, 而换行;

下面, 我们分别讲解一下;

normal

.text {
  /* normal 是默认值 */
  white-space: normal;
}

<!-- 虽然有很多的空格, 但是浏览器会只展示成1个空格 -->
<p>This         paragraph has    many spaces in it.</p>

如果文本内容溢出, 则会换行

<div style="width: 200px">
  Olympic athlete Sakura Kokumai targeted in antiAsianrantatparkOlympicathlete
  Sakura Kokumai targeted in anti-Asian rant at park
</div>

大家会发现, 当出现单词非常长的时候, 浏览器并不会截断它, 而是让它在一行展示完;

但是, 如果全是中文, 则会截断;

<div style="width: 200px">
  哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈
</div>

这是因为在处理 CJK(中国,日本, 韩国)文字时, 认为每一个字符都是可以被截断的;
而其它语言默认不可以;

如果, 一定要让单词溢出时被截断, 则可以使用 word-break

.text {
  word-break: break-all;
}

nowrap

nowrap 表示不换行;

<div style="width: 200px; white-space: nowrap;">
  哈哈哈哈哈啊哈哈哈哈哈哈nowrap哈啊哈哈哈哈哈哈哈啊哈nowrap哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈
</div>

虽然, 指定了宽度, 但是, 文本会依旧在一行;
这个属性也和文本溢出时, 展示省略号有关;

pre, pre-wrap, pre-line

• pre, 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。不受到父级的影响;
• pre-wrap, 连续的空白符会被保留。在遇到换行符或者<br>元素; 会受到父级 block 的宽度影响, 而换行;
• pre-line, 连续的空白符会被合并。在遇到换行符或者<br>元素; 会受到父级 block 的宽度影响, 而换行;

我们看具体的例子

<div style="width: 100px; white-space: pre;">
  所有的空格都保留了 , 文本内容不会因父级设置了100px的宽度, 而换行
  哈哈哈哈哈啊哈哈哈哈哈哈nowrap哈啊哈哈哈哈哈哈哈啊哈nowrap哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈
</div>

<div style="width: 100px; white-space: pre-wrap;">
  所有的空格都 保留了, 但是如果文本内容较长, 会换行
  哈哈哈哈哈啊哈哈哈哈哈哈nowrap哈啊哈哈哈哈哈哈哈啊哈nowrap哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈
</div>

<div style="width: 100px; white-space: pre-line;">
  空格会被 收缩成1个, 但是如果文本内容较长, 会换行
  啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈
</div>

文本溢出超出部分省略号

我们会遇到如果文本超过多少字就展示省略号的需求;
可以参考下面的代码

.text-box {
  /* 必须设置宽度, 且不能为 百分比 */
  width: 100px;
  /* 块级元素;  也可以是 inline-block */
  display: block;
  /* 设置超出内容隐藏 */
  overflow: hidden;
  /* 设置文本超出内容隐藏 */
  text-overflow: ellipsis;
  /*  溢出不换行 */
  white-space: nowrap;
}

如果需要设置多行超出展示省略号; (IE 不支持)

.text-box {
  width: 100px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 设置伸缩盒子的子元素排列方式--从上到下垂直排列 */
  -webkit-box-orient: vertical;
  /* 显示的行 */
  -webkit-line-clamp: 2;
}

参考文章

MDN white-space

css 文本超出就隐藏并且显示省略号

css 文本换行总结

css-text-overflow-ellipsis-not-working