如何让文本超出 部分/文本框 显示省略号

（1）实现原理：

第一步： 溢出隐藏

overflow: hidden;

第二步：让文本不会换行， 在同一行继续

white-space: nowrap;

第三步：用省略号来代表未显示完的文本

text-overflow: ellipsis;

（2）代码实现：

HTML：

<h4 class="textSongs">乱石穿空，惊涛拍岸，卷起千堆雪。 江山如画，一时多少豪杰。</h4>

CSS：

.textSongs {width: 500px;height: 30px;line-height: 30px;border: 1px solid red;/*第一步： 溢出隐藏 */overflow: hidden;/* 第二步：让文本不会换行， 在同一行继续 */white-space: nowrap;/* 第三步：用省略号来代表未显示完的文本 */text-overflow: ellipsis;}

运行效果：

如有不同见解，欢迎讨论，更多内容，正在更新中。。。。。。

如果觉得《如何让文本超出 部分/文本框 显示省略号》对你有帮助，请点赞、收藏，并留下你的观点哦！