前端，文本内容太长，一行显示不下，用省略号...代替 保险的三个属性

前端，文本内容太长，一行显示不下，用省略号...代替 一、用到的三个属性二、三个属性详解1. white-space 属性2. text-overflow 属性3. overflow 属性

一、用到的三个属性 white-space: nowrap;text-overflow: ellipsis;overflow: hidden;

三个属性配合使用：

空白符不换行 nowrap，在同一行继续显示；文本溢出包含元素时，显示省略号 ellipsis 来代表被修剪的文本；将溢出的文本内容隐藏 hidden

示例代码：

this is my Title.divBox{max-width: 200px;border: 1px solid red;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}绿媒发现：28名台湾艺人十一祝“祖国生日快乐”，“双十”全噤声

效果如图： text-overflow: clip的效果：文本结尾很突兀

二、三个属性详解 1. white-space 属性

white-space 属性设置如何处理文本中的空白符

空白符：空格符，制表符，换行符的统称

空格符：它不等同于键盘上的 space 键，在键盘上是没有的。它不是空格，但是能起到空格的效果，并占用一个字符位置。在计算机中，空格符号有它自己的表示方式，一般是用O表示。

制表符：也叫制表位，功能是在不使用表格的情况下在垂直方向按列对齐文本。比较常见的应用包括名单、简单列表等。也可以应用于制作页眉页脚等同一行有几个对齐位置的行。

换行符：符号 ，使得光标下移一格。

white-space 属性的取值：

normal：默认值，空白会被浏览器忽略。pre：空白会被浏览器保留，其行为方式类似 HTML 中的 标签。nowrap：文本不会换行，在同一行上继续，直到遇到 标签为止。 2. text-overflow 属性

text-overflow 属性规定当文本溢出包含元素（如div、p）时发生的事情。取值如下：

clip：修剪文本。能显示多少就显示多少，显示不了的隐藏。结尾处很突兀。ellipsis：显示省略符号...来代表被修剪的文本。符合人们的常识和习惯，结尾看起来也和谐。string：使用给定的字符串来代表被修剪的文本。 3. overflow 属性

overflow 属性定义溢出元素内容区的内容会如何处理。取值如下：

visible：默认值。可见，内容不会被修剪，会呈现在元素框之外。hidden：隐藏，内容会被修剪，并且其余内容是不可见的。scroll：滚动，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit：规定应该从父元素继承 overflow 属性的值。