分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 如何进行文本溢出：两行省略？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_696_0@

我有一个容器,文本可以扩展为两行,高度为40px,字体大小为18px.当我做：

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

然后虚线显示正确但它在一行上被切断.当我这样做时：

text-overflow: ellipsis;

然后它正确地显示了2行,但最后没有“……”.我如何实现这一点,以便在第二行正确使用两行和“……”？

@H_675_11@解决方法

向容器添加一个span,它将保存文本：

<div class="container">
  <span>text...</span>
</span>

添加此CSS：

.container {
   overflow: hidden;
   position: relative;
   BACkground: white;   //or other color
}

.container:after {
  content: '...';       //the ellipsis
  position: absolute;   //positioned in bottom-right
  bottom: 0;            //...
  right: 0;             //...
  padding: 0 0.3em;     //give some separation from text
  BACkground: inherit;  //same color as container
}

.container span:after {
  content: '\0000a0';   //a space
  position: absolute;   //to cover up ellipsis if needed
  width: 1000px;        //...
  z-index: 1;           //...
  BACkground: white;    //must match container's color.  can't use inherit here.
}

Fiddle

调整容器大小,您将看到省略号仅在必要时显示.

应该适用于所有现代浏览器.