本篇文章为大家展示了怎么使用css text-overflow属性，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

css text-overflow属性用于指定当文本溢出包含它的元素时，应该发生什么事情。所有主流浏览器都支持 text-overflow 属性。

css text-overflow属性怎么用？

text-overflow 属性规定当文本溢出包含元素时发生的事情。

语法：

text-overflow: clip|ellipsis|string;

属性值：

●　clip：修剪文本。

●　ellipsis：显示省略符号来代表被修剪的文本。

●　string：使用给定的字符串来代表被修剪的文本。

注释：所有主流浏览器都支持 text-overflow 属性。

css text-overflow属性 示例

<!DOCTYPE html><html><head><meta charset="utf-8"> <style> div.test{white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000;}</style></head><body><p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p><p>div 使用 &quot;text-overflow:ellipsis&quot;:</p><div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div><p>div 使用 &quot;text-overflow:clip&quot;:</p><div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div><p>div 使用自定义字符串 &quot;text-overflow: &gt;&gt;&quot;(只在 Firefox 浏览器下有效):</p><div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div></body></html>

效果图：

上述内容就是怎么使用css text-overflow属性，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。