学习 CSS 文本溢出显示省略号

这是我参与更文挑战的第5天，活动详情查看：更文挑战

在开发中经常会用到文本溢出省略打点，为了更好的记住它，现在开始深入了解。

单行文本显示省略号

<!DOCTYPE html>
<html lang="en">
  <style>
    .text {
      width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  <body>
    <div class="text">单行文本显示省略号</div>
  </body>
</html>

学习 CSS 文本溢出显示省略号

使用white-space属性设置不换行、overflow属性隐藏超出部分,text-overflow属性添加省略号。需注意必须有固定宽度才会出现效果。

white-space属性 用来设置如何处理元素中的空白。
overflow属性 定义当一个元素的内容太大而无法适应时，块级格式化上下文如何处理。它是 overflow-x 和 overflow-y的简写属性。
text-overflow属性 确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'）或显示一个自定义字符串。

多行文本显示省略号

<!DOCTYPE html>
<html lang="en">
  <style>
    .text {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  </style>
  <body>
    <div class="text">单行文本显示省略号多行文本显示省略号行文本显示省略号</div>
  </body>
</html>

学习 CSS 文本溢出显示省略号

多行文本主要是把white-space属性修改为使用-webkit-line-clamp，限制在一个块元素显示的文本的行数来实现的。

display: -webkit-box 设置div为弹性伸缩盒子模型。
-webkit-line-clamp 可以把块容器中的内容限制为指定的行数。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient属性设置成 vertical 时才有效果。
-webkit-box-orient 用来设置一个元素是水平还是垂直布局其内容。该特性是非标准的，使用时需要注意兼容性。

展示全文

最简单的方式是，使用html自带的title属性

<div  class="text">
    单行文本显示省略号多行文本显示省略号行文本显示省略号
</div>

学习 CSS 文本溢出显示省略号

在块容器外面，创建一个新的元素，来提示全文。

<!DOCTYPE html>
<html lang="en">
  <style>
    .text {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .textTitle {
      position: relative;
    }
    .textTitle::after {
      display: none;
      content: attr(data-text);
      position: absolute;
      top: -60px;
      left: 5px;

      padding: 7px 4px 6px 6px;
      border: 1px solid #bed48f;
      border-left: none;
      background-color: #effaeb;

      height: 20px;
    }
    .text:hover + .textTitle::after {
      display: block;
    }
  </style>
  <body>
    <div class="text">单行文本显示省略号多行文本显示省略号行文本显示省略号</div>
    <div class="textTitle" data-text="单行文本显示省略号多行文本显示省略号行文本显示省略号"></div>
  </body>
</html>

学习 CSS 文本溢出显示省略号

主要使用伪类，获取自定义标签中的文字。根据:hover的特性来判断，提示信息是否展示。

其他效果

对标签块使用省略效果。

<!DOCTYPE html>
<html lang="en">
  <style>
    .text {
      width: 200px;
    }
    .text_desc {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .text_desc span {
      width: 50px;
      height: 20px;
      padding: 2px;
      background-color: burlywood;
    }
  </style>
  <body>
    <div class="text">
      <p class="text_desc">
        <span>FE</span>
        <span>UI</span>
        <span>UX Designer</span>
        <span>前端工程师</span>
      </p>
    </div>
  </body>
</html>

学习 CSS 文本溢出显示省略号

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。