css教程：text-overflow: ellipsis超出文字显示省略号 作者：马育民 • 2023-05-19 15:24 • 阅读：10049 # 说明 `text-overflow` 样式有以下值： - clip：默认值 - ellipsis：省略的部分，显示省略号。搭配 `overflow: hidden` 生效 - string：省略的部分，显示指定的字符串。搭配 `overflow: hidden` 生效 # 案例 如下图，超出的部分阶段，后面显示省略号 [](/upload/0/0/1IX5WgWHIG0v.jpg) ``` <style> div{ width: 100px; background-color: coral; /* 文字不换行 */ white-space: nowrap; /* 超出文字，后面显示省略号 */ text-overflow: ellipsis; /* 超出部分隐藏，搭配 text-overflow 使用 */ overflow: hidden; } </style> ``` ``` <div> 热评华硕灵耀14 2023：2.8K OLED高刷屏轻薄本 </div> ``` 原文出处：http://malaoshi.top/show_1IX5WgZB8Cu1.html