文本溢出div部分显示省略号

最新推荐文章于 2023-09-18 15:09:15 发布

我要向日葵^V^

最新推荐文章于 2023-09-18 15:09:15 发布

阅读量167

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44011606/article/details/125201961

版权

<div class="graph-activity-node">
  <div class="nameClass">{{name}}</div>
</div>

.nameClass {
    margin: auto; // 为了让字少的时候居中
    -webkit-line-clamp: 3; // 限制最多输入3行
    display: -webkit-box; // 对象作为弹性伸缩盒子模型显示
    -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式：垂直的
    overflow: hidden; // 文本溢出限定的宽度就隐藏内容
    text-overflow: ellipsis; // 隐藏溢出范围的文本用省略号 “…” 
    max-height: 55px;
    word-break: break-all; // 长单词截断强制换行
  }