css实现溢出文本自动转换为省略号

最新推荐文章于 2025-06-24 09:47:52 发布

啥也不会的毛不会

最新推荐文章于 2025-06-24 09:47:52 发布

阅读量660

点赞数

CC 4.0 BY-SA版权

文章标签： css css3

本文链接：https://blog.youkuaiyun.com/mhc20201554114/article/details/121445113

本文介绍了如何使用CSS样式处理div元素内的文本溢出问题，包括实现文本自动转为省略号的方法，以及如何通过direction属性让文本从左侧开始溢出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在敲代码的过程中，有时那些使用了white-space: nowrap的div会产生文本溢出，文本溢出边框甚至侵占到其他div的区域，这无疑会让我们的页面变的十分难看，极大的降低用户体验，因此，为了避免文本溢出从而影响其他区域，我们经常会使用overflow:hidden来把溢出的文本隐藏，这无疑是一个很好的选择，但是有的时候，就会出现只出现半截字的情况，虽然没有前面的影响那么大，但是还是一个瑕疵，在这里，我们可以给对应的div的css中加上如下字段，从而实现溢出文本自动转换为省略号

.div{
    text-overflow: ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

此处应当注意，三个属性缺一不可， text-overflow: ellipsis;是指定了溢出文本要转换成那种形式，而overflow:hidden;更是避免文本溢出，white-space:nowrap;是为了防止文本换行从而将div的高度给撑高。

如果想要使文本左侧溢出并且溢出文本显示为省略号的话，就可以使用direction属性来实现，即在上述css中加入direction:rtl;即可，这里的direction属性，是用于规定文本方向的属性，如果写的是rtl,就是先右后左，即文本方向是从右往左的。如果是ltr，那就是先左后右，即文本的方向是从左往右的。这样当溢出的时候就会左侧溢出。

若是想要溢出文本变为指定的形式，也可以使用text-overflow：string属性，string部分用'这里写要改成的形式'这种方法来写，但是需要注意的是，此方法在绝大多数浏览器上不适用，因此，在写代码的过程中，尽量不要用这一属性。