css 文字隐藏

Karl Du

发布于 2020-10-23 11:42:10

2.9K0

发布于 2020-10-23 11:42:10

文章被收录于专栏：Web开发之路

css 文字隐藏

1. 文字越界显示点点点

在 HTML 页面上，遇到文字长度超出一定长度的时候，我们希望将超出的部分显示为...，这个功能很好实现

.demo {
  display: block;
  text-overflow: ellipsis; // 显示省略符号来代表被修剪得文本
  overflow: hidden; // 溢出内容隐藏
  white-space: nowrap; // 强制文本在一行内显示
}

2. 在文字后面，添加图标

遇到复杂得情况，我们需要在这段文字后面紧跟一个图标，当文字溢出得时候，图标能照常显示在后面

e.g. 张三李四王二麻子，喜欢去...图标

这种情况下，就需要对标签布局进行处理，因为 text-overflow 的作用环境是一个 'block' 状态下的父元素容器

  <div class="block">
    张三李四王二麻子，喜欢去打麻将
    <div class="icon">图标</div>
  </div>

.block {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 20px;
  width: 40px;
}
.icon {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  background: red;
  display: inline-block;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/4/28 下，如有侵权请联系 cloudcommunity@tencent.com 删除

css