单行省略号和多行省略号的实现

最新推荐文章于 2024-09-10 10:26:11 发布

zhener09

最新推荐文章于 2024-09-10 10:26:11 发布

阅读量234

点赞数

本文链接：https://blog.csdn.net/sinat_41747081/article/details/104061333

版权

本文介绍了如何使用HTML和JavaScript来实现单行文本和多行文本的省略显示效果，通过CSS控制文本溢出部分显示省略号，结合JS实现动态省略，以达到理想的文本截断效果。

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

<style>
  /* 单行省略号 */
   .single {
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
       max-width: 200px;
   }
   /* 多行省略号：有兼容性问题 */
   .multiple {
       width: 200px;
       overflow: hidden;
       text-overflow: ellipsis;
       word-break: break-all;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
   }
   /* 多行省略号：没有兼容性问题，但有时会出现省略号盖住半个文字的情况,不好控制 */
   .multiple-ellipse {
       width: 200px;
       position: relative;
       /* 高度为需要显示的行数*行高，比如这里我们显示两行，则为44px */
       height: 44px;
       overflow: hidden;
   }
   .multiple-ellipse::after {
       content: "...";
       position: absolute;
       bottom: 0;
       right: 6px;
       padding: 0 1px;
       background-color: #fff;
   }
   .multiple-ellipse-test {
       width: 200px;
       line-height: 22px;
       white-space: pre-wrap;
       word-break: break-all;
   }
</style>