实现单行/多行文本溢出

在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号。

一. 单行文本溢出

即文本在一行内显示，超出部分以省略号的形式展现

1. 涉及的CSS属性

overflow: hidden

white-space: nowrap

text-overflow: clip/ellipsis clip当对象内文本溢出部分裁切掉，ellipsis当对象内文本溢出时显示省略标记(...)

二. 多行文本溢出

1. 基于高度截断

伪元素＋定位


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
      }
 
      .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
      }
    </style>
  </head>
  <body>
    <div class="demo">
      这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本
    </div>
  </body>
</html>

2. 基于行数截断

-webkit-line-clamp: 2 // 用来限制一个块元素显示的文本行数

display: -webkit-box // 和1结合使用，将对象作为弹性伸缩盒对象的子元素

-webkit-box-orient: vertical // 和1结合使用，设置或检索伸缩盒对象的子元素的排列方式

overflow:hidden // 文本溢出限定的宽度就隐藏内容

text-overflow: ellipsis // 多行文本的情况下，用省略号"..."隐藏溢出范围的文本

相关阅读:
客户端和服务端信息交互模型
dubbo + nacos
docker-elasticsearch集群
Java---Stream进阶
【JavaWeb】案例二：一次性验证码的校验
第02篇:解耦就用Event, 用了都说好。
鸿蒙开发套件全面升级，助力鸿蒙生态蓬勃发展
2023年最大规模的IPO正式诞生，Arm市值4700亿
使用verdaccio+docker搭建npm私有仓库以及使用
【深度学习 | 核心概念】那些深度学习路上必经的核心概念，确定不来看看？（五）

原文地址：https://blog.csdn.net/m0_66706006/article/details/133468271