文字在一行或多行时超出显示省略号

小钱要努力

已于 2022-08-16 18:03:38 修改

阅读量320

点赞数

分类专栏： css 文章标签： css html

于 2022-06-30 00:03:58 首次发布

本文链接：https://blog.csdn.net/qq_43699122/article/details/125531949

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

欢迎访问我的博客地址 : 博客地址

文字在一行或多行时超出显示省略号

一行超出显示省略

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

:::demo [vanilla]

<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样式的值决定。

:::demo [vanilla]

<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判断是否显示了省略号

有时候我们需要知道是否已经溢出，显示了省略号，可以用到clientHeight和scrollHeight的知识：

let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
      console.log("已经溢出显示省略号");
} else {
      console.log("没有溢出");
}