开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情

前言

有这么一个需求：用省略号替代一段话的多余字段，该怎么实现呢？用文本属性就可以实现，具体怎么做，接下来就让我们了解下文本属性。

属性

white-space:设置文本的空白处理方式。
normal:忽略空白，默认值。
pre:保留空白。
nowrap:让文本不换行，遇换行符才换行。
pre-line:合并空白符。
pre-wrap:保留空白，并进行换行。
word-wrap:设置单词自动换行方式。
normal:保持长单词连贯性不会进行换行，默认值。
break-word:会将长单词拆分换行。
word-break:设置文本断句换行方式。
normal:根据浏览器换行规则进行断句换行，默认值
break-all:将长单词等进行拆分换行，这个效果跟break-word一样的，两者区别在于break-all是直接拆分，break-wrod会先尝试将单词换到下一整行，整行都放不下才会拆分。也就是说break-all更节省空间。
keep-all:在空格、连字符处断句换行。

   .text {
      width: 150px;
      height: 300px;
      background: orange;
      word-break: break-all;
    }

ELY(_JN(9UPW0~NT45MT}4U.png

text-shadow:设置文本阴影效果，利用这个属性可以让文字看起来更炫酷。

   .text {
      ...(代替第一个前三个属性);
      text-align: center;
      /* 四个属性值 水平阴影 垂直阴影 模糊距离 阴影颜色 前两个必须要设置 后两个可选 */
      text-shadow: 5px 5px 1px white;
    }

L}RDQ7S}%LH897U4DSH1Z.png

box-shadow:设置盒子阴影效果，用法跟text-shadow一样。
text-overflow:设置文本溢出展示方式。
ellipsis:省略号展示。
clip:溢出文本不显示。
sting:用设置好的字符串代替展示。
我们开头说过用省略号代替多余字符的需求，利用这个配合white-space:nowrap;overflow:hidden就能实现。

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

OUU5N6)@1BAW~6)LMHN%Z}0.png

text-align:设置对齐方式。
center:放置中间。 left:左边对齐。 right:右边对齐。 justify:两端对齐。
text-indent:设置首行缩进，属性值为长度。
letter-spacing:设置字符之间的间距。属性值为长度，也可设置normal。
word-spacing:设置单词之间的间距。word-spacing只对单词有用，汉字就需要用letter-spacing来设置。

总结

以上就是文本属性，文本属性换行有好几种属性都能实现，要注意区别，根据具体的需求使用最佳的属性去实现。

CSS详解——文本属性

前言

属性

总结