css 文字隐藏

css 文字隐藏

1. 文字越界显示点点点

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

代码语言：javascript复制

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

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

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

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

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

代码语言：javascript复制

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

代码语言：javascript复制

.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;
}

css html block overflow text

0 人点赞