CSS span单行长标题省略显示示例代码

最新推荐文章于 2024-01-15 10:53:54 发布

laoyouzhazi

最新推荐文章于 2024-01-15 10:53:54 发布

阅读量477

点赞数

文章标签： text-overflow white-space overflow display width

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_21264377/article/details/116786589

版权

本文介绍了如何使用CSS实现单行标题在超长时进行省略显示，关键属性包括`text-overflow: ellipsis;`、`overflow: hidden;`、`white-space: nowrap;`以及设置`display: inline-block;`和宽度。通过调整这些属性，可以确保单行标题在不同场景下正确显示。

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

span的CSS代码：

.item .item-title{
    width: 166px;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

将代码中的display属性修改为：inline-block:

.item .item-title{
    width: 166px;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}