如果你正在使用javascript，也许你可以像下面这样做。 然而，这并没有考虑到集装箱的高度…

// whatever string const myString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque sem ut consequat pulvinar. Curabitur vehicula quam sit amet risus aliquet, sed rhoncus tortor fermentum. Etiam ac fermentum nisi. Ut in lobortis eros. Etiam urna felis, interdum sit amet fringilla eu, bibendum et nunc.'; // you can set max string length const maxStrLength = 100; const truncatedString = myString.length > maxStrLength ? `${myString.substring(0, maxStrLength)}...` : myString; console.log(truncatedString);

如果你也有多个元素，并且你想要一个省略号后面带有“阅读更多”按钮的链接，请访问https://stackoverflow.com/a/51418807/10104342

如果你想要这样的东西:

每个月的前10tb是不收费的。所有其他交通…阅读更多

我只是在这个概念上玩了一下。基本上，如果你可以从你的最后一个字符中删除一个像素，这里是一个纯css和html的解决方案:

其工作方式是将一个div绝对定位在视口的可视区域之下。我们希望随着内容的增长，div向上偏移到可见区域。如果内容增长太多，我们的div将偏移过高，所以我们的内容可以增长的高度的上限。

HTML:

<div class="text-container">
  <span class="text-content">
    PUT YOUR TEXT HERE
    <div class="ellipsis">...</div> // You could even make this a pseudo-element
  </span>
</div>

CSS:

.text-container {
    position: relative;
    display: block;
    color: #838485;
    width: 24em;
    height: calc(2em + 5px); // This is the max height you want to show of the text. A little extra space is for characters that extend below the line like 'j'
    overflow: hidden;
    white-space: normal;
}

.text-content {
  word-break: break-all;
  position: relative;
  display: block;
  max-height: 3em;       // This prevents the ellipsis element from being offset too much. It should be 1 line height greater than the viewport 
}

.ellipsis {
  position: absolute;
  right: 0;
  top: calc(4em + 2px - 100%); // Offset grows inversely with content height. Initially extends below the viewport, as content grows it offsets up, and reaches a maximum due to max-height of the content
  text-align: left;
  background: white;
}

我已经在Chrome、FF、Safari和IE 11上进行了测试。

你可以在这里查看:http://codepen.io/puopg/pen/vKWJwK

你甚至可以用一些CSS魔术来缓解字符的突然切断。

编辑:我猜这强加的一件事是word-break: break-all，否则内容不会扩展到视口的最末端。：(

p{
line-height: 20px;
width: 157px;
white-space: nowrap; 
overflow: hidden;
text-overflow: ellipsis;
}

或者我们可以通过使用和高度和溢出来限制行。

如果您想对单行文本应用省略号(…)，CSS通过text-overflow属性使之变得有些容易。这仍然有点棘手(由于所有的要求-请参阅下面)，但文本溢出使它成为可能和可靠的。

然而，如果您想在多行文本上使用省略号——就像这里的情况一样——那么就别指望有什么乐趣了。CSS没有标准的方法来做到这一点，而且变通方法是随机的。

单行文本的省略

使用文本溢出，省略号可以应用于单行文本。CSS的要求如下:

必须有一个宽度，最大宽度或弹性基础 必须有空白:nowrap 必须有溢出的值而不是可见的 必须显示:块或内联块 (或功能对等物，如伸缩项目)。

这是可行的:

p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; } <p> This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. </p>

新美国jsFiddle

但是，尝试删除宽度，或让溢出默认为可见，或删除空白:nowrap，或使用块容器元素以外的东西，AND，省略号失败得很惨。

这里有一个重要的结论:text-overflow:省略号对多行文本没有影响。(仅white-space: nowrap要求就消除了这种可能性。)

p { width: 200px; /* white-space: nowrap; */ height: 90px; /* new */ overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; } <p> This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. </p>

新美国jsFiddle

多行文本的省略

因为CSS在多行文本上没有省略号属性，所以创建了各种变通方法。这些方法可以在这里找到:

jQuery dotdotdot…… 行截断(截断多行文本) CSS省略:如何在纯CSS中管理多行省略 多行文本截断的纯CSS解决方案

上面的Mobify链接被删除了，现在引用了archive.org的副本，但似乎在这个代码依赖中实现了。

也许这个能帮到你们。多线椭圆与工具提示悬停。 https://codepen.io/Anugraha123/pen/WOBdOb

<div>
     <p class="cards-values">Lorem ipsum dolor sit amet,   consectetur adipiscing elit. Nunc aliquet lorem commodo, semper mauris nec, suscipit nisi. Nullam laoreet massa sit amet leo malesuada imperdiet eu a augue. Sed ac diam quis ante congue volutpat non vitae sem. Vivamus a felis id dui aliquam tempus
      </p>
      <span class="tooltip"></span>
</div>