html文字单行以及多行超出显示省略号

最新推荐文章于 2025-06-10 12:41:12 发布

AHRL__

最新推荐文章于 2025-06-10 12:41:12 发布

阅读量2.2k

点赞数

分类专栏： css 文章标签： css 文本超出显示省略号

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍前端页面中实现文字单行或多行溢出显示省略号的方法。单行使用text-overflow:ellipsis属性；多行通过浮动元素配合伪元素实现。这两种方法兼容性良好，能有效提升页面展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html文字单行以及多行超出显示省略号

在前端页面中，许多时候需要用到文字超出显示省略号的情况，今天在github上看见一片总结得特别全的文章，列出一下两种较好的方法。
原文链接：https://github.com/libin1991/libin_Blog/issues/372

单行超出显示省略号

单行超出显示省略号可直接使用text-overflow: ellipsis，具体使用参照下面代码，text-overflow: ellipsis兼容所有浏览器，但是只能用于单行文本，它是在不换行的情况下将超出部分使用省略号代替。

<div>
    <p>不是所有的梦都来得及实现,不是所有的话都来得及告诉你</p>
</div>

div {
   margin: 100px;
    width: 200px;
    background: rgb(227, 232, 236);
}

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

效果展示

多行文本超出显示省略号

原理可参考原文

<div class="wrap">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
</div>

.wrap {
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.wrap .text {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break:break-all;
}
.wrap::before {
  float: left;
  width: 5px;
  content: '';
  height: 40px;
}
.wrap::after {
  float: right;
  content: "...";
  height: 20px;
  line-height: 20px;
  padding-right: 5px;
  text-align: right;
  width: 3em;
  margin-left: -3em;
  position: relative;
  left: 100%;
  top: -20px;
  padding-right: 5px;
  /* 显示更好的效果 */
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}