博客主页 😑
使用代码实现文字在超出内容时显示省略号

Author:

公爵

©

Wordage:

共计 1558 字

needs:

约 1 分钟

Popular:

5 ℃

Created:

目 录

一行超出显示省略

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
<html>
   <div class="box-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
    .box-42b6{
        border: 1px solid #999;
        width: 200px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

:::

两行(多行)超出显示省略号

overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

显示的行数由line-clamp样式的值决定。

<html>
   <div class="box2-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
    .box2-42b6{
        border: 1px solid #999;
        width: 200px;

        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

      }
</style>

:::

JS判断是否显示了省略号

有时候我们需要知道是否已经溢出,显示了省略号,可以用到clientHeightscrollHeight的知识:

let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
      console.log("已经溢出显示省略号");
} else {
      console.log("没有溢出");
}
这里可以用于判断是否溢出显示展开收缩按钮。

知识点拓展

scrollHeight:元素内容的高度,包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。

clientHeight:元素内容的可视区的高度,包含内边距,但不包括水平滚动条、边框和外边距。

offsetHeight:元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。

共计 0 条评论,点此发表评论
萌ICP备20226257号 赣ICP备2022001242号-1 闽公网安备35020502000606号 本站已运行 253 天 10 小时 29 分 51统计 百度统计 本站由提供CDN加速服务 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2022 ~ 2022. 公爵书房 All rights reserved.
历史足迹
分类目录
  • 随笔
  • 知识
  • 分享
  • 书籍
  • 专栏
  • 笔记