用“...”替换隐藏的溢出。 [英] Replace hidden overflow with "..."

问题描述

在 javscript 中，我创建了一个将文本放在div中的函数。但是，有时这个文本太长了。所以在 css 中我将溢出设置为隐藏。

In javscript i created a function that puts text in a div. However, sometimes this text is too long for this div. So in css I set overflow to hidden.

overflow: hidden

我不只是不想显示此溢出，但我想用...替换它以便用户看到信息不完整。

I don't just want to not show this overflow, but i want to replace it with "..." in order that the user sees that the information is not complete.

我已经尝试计算字符串的长度，并在几个字符后停止它，但是因为我的div是非常狭窄，它似乎是一个很好的解决方案。

I've already tried to count the length of the string, and stop it after a few characters, but as my div is really narrow, it doenst seem like a good solution.

我怎么能这样做？

编辑：我想拥有多条线，而不是一条

i want to have mutiple lines, not one

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可以显示此文本：

Let's say the div can display this text:

这也是

很多文本为
这个div，但是

This is way too
much text for
this div, but

怎么能我在'但'之后加了3个点？

How can i add 3 dots after 'but' ?

推荐答案

我做了一个名为 hideOverflow 自动隐藏溢出并用省略号替换它。

I made a javascript function called hideOverflow which automatically hides the overflow and replaces it with an ellipsis.

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) + '…';
      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>

目前不支持保证金或填充，但您可以轻松调整计算父线高度的lineHeight和maxLineCount 部分 hideOverflow 函数，以实现与填充和边距相同的结果。

This does not support margin or padding currently, but you could easily adjust the Calculate lineHeight and maxLineCount for parent's height section of the hideOverflow function in order to achieve this same result with padding and margin.

希望这有帮助！

这篇关于用“...”替换隐藏的溢出。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！