Question

在 javscript 中，我创建了一个将文本放入div的函数。但是，有时此文本对于该div来说太长了。因此，在 css 中，我将溢出设置为隐藏。

overflow: hidden

我不仅不希望显示此溢出，还想将其替换为“ ...”，以便用户看到信息不完整。

我已经尝试过计算字符串的长度，并在几个字符后停止它，但是由于我的div确实很窄，因此确实是个不错的解决方案。

我该怎么办？

编辑：我想使用多行，而不是一条

HTML：

<div id="event">This is way too much text for this div, but i want to show it partly</div>

CSS：

#event{
   position: fixed; //doensn't have to do anything with the problem
   font-size: 8px; //idem
   width: 50px;
   line-height: 1em;
   overflow: hidden;
}

假设div可以显示以下文本：

也是这样
很多文字
这个div，但是

如何在“ but”之后添加3个点？

Answer 1

line-clamp属性在特定行数处截断文本。 Read more about line-clamp。另外：请检查浏览器支持。

 p#event {
  --line-height: 1.4;
  --num-lines:2; /* 2 lines of text*/
  line-height:var(--line-height);
  display: block; /* Fallback for non-webkit */  
  max-width: 150px;
  height: calc(1em * var(--line-height) * var(--num-lines)); /*2 lines*/
  display: -webkit-box;
  -webkit-line-clamp: var(--num-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 2

我制作了一个名为hideOverflow的javascript函数，该函数自动隐藏溢出并用省略号代替。

function hideOverflow(element) {

  //Calculate lineHeight and maxLineCount for parent's height
  element.style.whiteSpace = 'nowrap';
  var parent = element.parentNode;
  var maxLineCount = Math.floor(parent.clientHeight / element.clientHeight);
  var maxLineHeight = element.clientHeight * maxLineCount;
  element.style.whiteSpace = 'normal';

  //Find and set maxLineHeight by replacing the overflow with an ellipses
  if (element.clientHeight > maxLineHeight) {
    var max = maxLineCount * element.style.lineHeight;
    for (var i = 0; element.clientHeight > maxLineHeight; i++) {
      element.innerHTML = element.textContent.slice(0, -2) + '&hellip;';
      i++;
      if (i === max) break;
    }
  }
}

hideOverflow(document.getElementById('foo'));

div {
      width: 300px;
      height: 100px;
      font-size: 18px;
      border: 1px black solid;
}

p {
  margin: 0px;
  padding: 0px;
}

<div>
  <p id="foo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et magna at sem tristique lobortis quis et nulla. Sed porttitor massa ac efficitur viverra. Donec eu commodo justo. Suspendisse libero quam, tincidunt non faucibus et, vehicula vel orci. Praesent in enim at odio ullamcorper gravida nec auctor diam. Aenean et feugiat quam. Donec sem felis, tristique et euismod at, elementum eget nulla.</p>
</div>

这目前不支持边距或填充，但是您可以轻松调整Calculate lineHeight and maxLineCount for parent's height函数的hideOverflow部分，以通过填充和边距实现相同的结果。

希望这会有所帮助！

Answer 3

您应该同时添加两个条件。您可以在小提琴中查看演示。

p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

div{
width: 100px;
}

<div>
<p> Your text is long enough to  show this</p>
<p> Your text is long enough to  show this</p>
<p> Your text is long enough to  show this</p>
</div>

将隐藏的溢出替换为“ ...”

3 个答案: