首页 > Web开发 > 详细

CSS多余文本省略号显示

时间:2019-11-03 02:02:03      阅读:110      评论:0      收藏:0      [点我收藏+]

CSS多余文本省略号显示

本次案例代码是在 elementui 当中的 table 组件中实际需求

当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用

对于过长文本进行单行省略显示,当鼠标移动到对应文本行时,展示全部,当鼠标离开后又恢复单行,多余内容收缩出现省略号

/deep/.el-table__row {
     .cell {
    //对超出内容隐藏
      overflow: hidden;
    //  显示省略符号来代表被修剪的文本
      text-overflow: ellipsis;
    //  文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
      white-space: nowrap;
     }
     .cell:hover{

      overflow: auto;

      text-overflow:clip;

      white-space:normal;
     }
}

以上为一 CSS3 常用案例

CSS多余文本省略号显示

原文:https://www.cnblogs.com/baiyang2292/p/11784621.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!