利用CSS使超出文本显示省略号

最新推荐文章于 2024-08-14 11:23:00 发布

杉杉up

最新推荐文章于 2024-08-14 11:23:00 发布

阅读量208

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_39501040/article/details/102922007

版权

本文介绍了如何利用CSS的white-space、overflow和text-overflow属性来处理文本溢出，实现当内容超出元素框时显示省略号的效果。通过设定white-space为nowrap防止文本换行，overflow为hidden隐藏超出内容，再结合text-overflow: ellipsis显示省略号，可以优雅地展示长文本。

摘要由CSDN通过智能技术生成

HTML代码：

<div class="div1">
    11111
    22222
    33333
</div>

CSS代码：

.div1{
    width: 100px;
    height: 30px;
    border: 1px solid gray;
    line-height: 30px;
    margin: auto;
    margin-top: 50px;
    /*下方的样式就是用来让超出的文本显示省略号的*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

运行结果：