css 超长标题中间省略

ggyyjavascript

已于 2023-01-09 15:03:50 修改

阅读量1.2k

点赞数 2

分类专栏： css 文章标签： css 前端 html

于 2023-01-09 12:57:47 首次发布

本文链接：https://blog.csdn.net/guoshujie1/article/details/128612683

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

重点是 :before 中加两个css属性

direction: rtl;
float: right;

<span
 title="CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26" 
 class="branch_name_front
 ">
 CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26
 </span>

.branch_name_front {
    display: block;
    text-align: justify;
    overflow: hidden;
    height: 20px;
    white-space: normal;
}
.branch_name_front::before{
    content: attr(title);
    width: 60%;
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}