css控制文本超长隐藏，最后用省略号表示

有时我们希望实现这样的效果：

当文字长度超过容器的宽度时，超出部分用省略号表示，起初以为会很麻烦，没想到用css可以轻松实现。 用text-overflow, overflow, white-space三个属性即可。先上代码：

<div class="box">
    Je préfère accorder de bonne grâce ce que je ne pourrais pas empêcher.
    - 对于无法阻挡的东西，我情愿给以赞美。
</div>
.box {
            width: 400px;
            border: 1px solid #999;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
复制代码

text-overflow

指明用什么方式向用户表示当前显示文本后面还有内容，可选：

• clip 默认值。在内容区域的极限处截断文本，因此字符可能会发生截断，要想在两个字符的过渡之间截断，可以使用''空白符。
• ellipsis 用一个省略号来表示被截断文本。空间太小，小到省略号也放不下，那么此省略号也会被截断
• ‘字符串’ 用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断。

---

###text-overflow注意事项：

• 只对在块级元素溢出的文本有效。
• 但是必须要与块级元素内联(inline)方向一致（举个反例：内容在盒子的下方溢出。此时就不会生效）.
• 并且这个属性不会强制元素的溢出，因此为了能让"text-overflow"能够生效，程序员们必须要在元素上添加几个额外的属性，比如"将overflow 设置为hidden"。为了让元素在一行上显示，因此设置white-space：nowrap