# 文本换行和省略

# 文本换行

# 单词换行(word-wrap)

word-wrap属性用来表明,是否允许浏览器在单词内进行断句,以防止某个字符串太长而找不到它的自然断句点时产生溢出。

/* 关键字值 */ word-wrap: normal; word-wrap: break-word;

“关键字”值 说明
normal 表示在正常的单词结束处换行
break-word 表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行

此外,word-wrap还有几个全局值:

  • inherit
  • initial
  • unset

注:word-wrap属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为overflow-wrapword-wrap现在被当作overflow-wrap的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

# 单词折断(word-break)

word-break用来表明,如果一个单词过长而不能在一行剩余的空间完全显示时,是否允许在折断单词来换行,以及如何换行。

其“关键字”值主要有:

“关键字”值 说明
normal 使用默认的换行规则,即 CJK 单词换行,非 CJK 单词不换行
break-all 允许任意非 CJK(Chinese/Japanese/Korean)文本间的单词断行,不管 CJK 还是非 CJK 的单词都换行
keep-all 不允许 CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非 CJK 文本的行为实际上和normal一致。即不管 CJK 还是非 CJK 的单词,都不换行

此外,word-break还有几个全局值:

  • inherit
  • initial
  • unset

# 换行示例

<div class="ctn">It's very goooooooooooooooooooood! </div>
1
.ctn {
  width: 200px;
  margin: 50px auto;
  background: #ccc;
  border: 5px solid #666;
}
1
2
3
4
5
6

# word-wrap 与 word-break 默认值

{
  word-break: normal;
  word-wrap: normal;
}
1
2
3
4

normal - 短单词

情况一:新的一行可以容纳单词

normal - 长单词

情况二:新的一行无法容纳单词

可见,默认行为里,若是单词过长,一行剩余的空间不足以放置该单词时,该单词将不会在单词内折行,且会新启用一行来显示完整的单词。但是当新的一行的长度仍无法容纳该单词时,该单词只能溢出。

# word-wrap: break-word

在情况二的基础上,我们仅添加word-wrap: break-word

word-wrap: break-word

情况三:新的一行无法容纳单词,折行显示

如此可见,word-wrap: break-word的作用是:若是单词过长,一行剩余的空间不足以放置该单词时,将先尝试新启用一行来显示完整的单词;若新的一行的长度仍无法容纳该单词时,该单词将在单词内折行。

# word-break:break-all

在添加了word-wrap: break-word之后的情况三里,我们发现第一行It's very后面剩余大量的空间闲置着,这种情况有时候并不是我们想要的。

在情况二的基础上,我们仅添加word-break:break-all。这时我们发现,相比word-wrap: break-word新启用一行显示单词不够显示的话再折断单词换行,word-break:break-all直接在原来那一行的基础上直接将单词断行,不留一点儿闲置的空间。

word-break:break-all

情况四:在原行基础上直接在折断单词换行

# white-space: nowrap

再来看最后一种情况,white-space属性是用来设置如何处理元素中的空白。而nowrap的效果是:连续的空白符会被合并,但文本内的换行无效。简单说就是,无论如何都不让你换行。我们继续在情况二基础上,添加white-space: nowrap

white-space: nowrap

情况五:只一行显示,不换行

# Reference

# 文本省略

# 省略示例

# flex 子元素如何省略文本?

<div class="ellipsis-ctn">
  <span class="flex-width">Flexible Width withdddd a lonnnnnnnng world!</span>
  <span class="fixed-width">Fixed</span>
</div>
1
2
3
4
.flex-width {
  background: green;
}
.fixed-width {
  width: 50px;
  background: red;
}
1
2
3
4
5
6
7

若是不给.flex-width元素添加flex属性,其默认值为:flex: 0 1 auto,即flex-grow: 0; flex-shrink: 1; flex-basis: auto;

单行展示

情况一:.flex-width元素内容较短

多行展示

情况二:.flex-width元素内容较长

.flex-width元素的内容有长有短时,其效果如情况一、二所示。此时,我们想要.flex-width元素的内容在单行展示并以...的省略方式避免溢出,于是我们将添加下面这些属性。

{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
1
2
3
4
5

单行省略文本

情况三:单行省略文本

我们所期望的功能实现了,但是当.flex-width元素的父元素也是flex布局,且.flex-width元素成为可放大的项目时,这种方法就失效了。

# 单行省略文本失效

flex布局的元素如下面的.ellipsis-ctn元素,其父元素.outer也是flex布局,且该.ellipsis-ctn同时还是可放大的,即没有固定的宽度,那么其下面的.flex-width的单行省略文本将失效。

<div class="outer">
  <div class="ctn">It's very gooooooood! </div>
  <div class="ellipsis-ctn">
    <span class="flex-width">FlexibleWidthWithddddLonnnnnnnngWorld!</span>
    <span class="fixed-width">Fixed</span>
  </div>
</div>
1
2
3
4
5
6
7
.outer {
  display: flex;
}
.ctn {
  width: 50px;
  margin: 50px 0;
  background: #ccc;
  border: 5px solid #666;
}
.ellipsis-ctn {
  display: flex;
  flex-grow: 1;
  margin: 50px 0;
  background: #ccc;
  border: 5px solid #666;
}
.flex-width {
  /* width: 0; */
  flex: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: green;
}
.fixed-width {
  width: 50px;
  background: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

单行文本失效

解决方案就是,在.flex-width元素上添加width: 0;或类似的方式,让元素有个初始大小。

修复单行文本失效

本站总访问量    次