vue中p标签文字过长截断悬浮显示

最新推荐文章于 2024-06-05 14:18:48 发布

腾云驾龙的兔子

最新推荐文章于 2024-06-05 14:18:48 发布

阅读量897

点赞数

分类专栏：前端文章标签： vue.js 前端截字悬浮折行

本文链接：https://blog.csdn.net/giiiig/article/details/125220875

版权

前端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

效果

源代码

<p>施工人员： {{ project.teamMember}}</p>

修改后

<p class="text-over" :title="project.teamMember" >施工人员： {{ project.teamMember}}</p>

以下为样式：

.text-over {
    /* 指定宽度 */
    white-space: nowrap;  /* 不换行，如果是span就可以不用这个 */
    overflow: hidden;     /* 溢出内容隐藏 */
    text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}