实现单行/多行文本溢出

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

一. 单行文本溢出

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

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 // 多行文本的情况下，用省略号"..."隐藏溢出范围的文本

相关阅读:
学习ssh配置
leetcode 606.根据二叉树创建字符串
uniapp 页面滚动到指定位置的方法
Oracle Database Express Edition (XE)配置与部署
JAVA堆中的对象结构
java计算机毕业设计基于安卓Android的掌上酒店预订APP
Express：接口设置
Intel带你初识视觉识别--OpenVINO
家电行业智慧物流体系构建：数商云供应链系统击破家电供应链数字化管理难题
flink双流join结果数据重复问题排查

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