文本截断

最新推荐文章于 2023-04-04 21:39:14 发布

守麦地

最新推荐文章于 2023-04-04 21:39:14 发布

阅读量567

点赞数 1

分类专栏： javascript 文章标签：文本截断

本文链接：https://blog.csdn.net/clh918/article/details/103395092

版权

本文详细介绍了如何使用CSS进行文本截断，包括单行截断和多行截断的实现方法，如`text-overflow: ellipsis`和`-webkit-line-clamp`属性。同时，针对Safari浏览器中出现的自带tooltip问题提供了解决方案，并探讨了判断文本是否触发截断的正确方法。

摘要由CSDN通过智能技术生成

文本截断

什么是文本截断

当文本超出容器的容纳范围的时候，截断超出的文本展示省略号。这种需求场景在开发中经常遇到。

单行截断

单行截断使用css熟悉text-overflow: ellipsis即可实现代码如下：

<style>
.ellipsis{
    
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<div class="ellipsis">
  酒一再沉溺，何时麻醉我抑郁，过去了的一切未平息；冲不破墙壁，前路没法看得清，再有那些挣扎与被逼。
</div>

效果如下

在这里插入图片描述

多行文本截断

css 属性 -webki-line-clamp 实现

        .ellipsis{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical; 
        }
        </style>
        <div class="ellipsis">
          酒一再沉溺，何时麻醉我抑郁，过去了的一切未平息；冲不破墙壁，前路没法看得清，再有那些挣扎与被逼;踏着灰色的轨迹，尽是深渊的水影，我已背上一身苦困后悔与唏嘘，你眼里却此刻充满泪水，这个世界已不知不觉的空虚,woo~~不想你别去。
        </div>

效果如下：
在这里插入图片描述
短板： -webkit-line-clamp 熟悉不是css 规范，在拥有webkit 内核的浏览器中才能实现，兼容性稍差一点，多用于移动端，因为移动端浏览器基本都是webkit 内核。

css 属性float 实现

原理：
有一个盒子里面包裹着3个盒子
盒子A左浮动，盒子B和盒子C 右浮动。
盒子A的宽度+盒子B的宽度和外层盒子的宽度相等。
那么当盒子B的高度小于等于盒子A的高度的时候盒子C是在盒子B右下方。
而当盒子B的高度大于盒子A的高度的时候
盒子C是在盒子A右下方。
代码

<style>
       .wrap{
    
          border: 1px solid #ccc;
       }
       .boxa{
    
           height: 42px;
           width: 100px;
           background-color: red;
           float: left
       }
       .boxb{
    
           color: #fff;
           background-color: blue;
           width: calc(100% - 100px);
           float: right
       }
       .boxc{