如何截断div高度的文本？

Question

我有一个高度为192px的div。我想截断div中的文本，并希望最后显示...。现在由于文本较大，按钮正在剪切，如快照中所示。 当我在其中添加html标签时会发生这种情况。

有人可以帮忙吗？

Answer 1

尝试以下CSS：

text-overflow: ellipsis;
overflow: hidden;
whitespace: no-wrap;

这仅适用于单行。对于多行，您需要JavaScript。

Answer 2

使用overflow: hidden ...如果您发布更多代码，我可以更具体。 - j-man86刚刚编辑

Answer 3

要隐藏文本，有一个简单的解决方案，在div中添加overflow：hidden css属性，如下面的

<div style="overflow:hidden">your code</div>

然而要显示......最后，你需要在javascript中获取div的内容并在那里使用substr函数。这将是试错法，以确定div中可以显示多少个字符。

Answer 4

如前所述，解决问题的最简单方法是将overflow:hidden添加到div的CSS样式中。

但是，这不会帮助你在包装结束时添加省略号（点），我无法使用多行文本换行（最后以3个点结尾）完全是CSS。

更简单的方法是使用jQuery（或类似的JavaScript库）来包装文本并在末尾添加3个点。例如：

Reference to another StackOverflow post about wrapping content using CSS and jQuery for single line and multi line text.

有时也建议处理内容服务器端，然后在页面上显示处理内容，但有时使用JavaScript会更方便（或更快/更容易）。

这是一个jQuery插件，可以解决这个问题：jQuery DotDotDot

Answer 5

这个问题用javascript标记，所以这是错过的答案。

您可以迭代每个字符或单词（如本例所示），同时检查高度是否低于所需高度。在每个truthy步骤中，您可以使用其文本覆盖元素内容，但不包含最后一个单词/字符。

在转换这种情况下，我在一个数组中转换了字符串，并在每次迭代时转换了它pop。这将删除我们文本的最后一部分，并确保循环不会无限...

/**
 * Truncates the text of an element depending its height.
 *
 * @param {Element} element
 * @param {Number} height
 */
function truncateByHeight(element, height) {
  var textContent = typeof element.textContent === 'undefined' ? 'innerText' : 'textContent';
  var parts = element[textContent].split(' ');

  while (parts.pop() && element.clientHeight > height) {
    element[textContent] = parts.join(' ');
  }
}


var element = document.querySelector('.box');

truncateByHeight(element, 120);

<div class="box">Cornua naturae fulgura uno coegit quisquis ad margine? Pluvialibus umentia vultus nulli nunc pendebat speciem emicuit! Margine tonitrua caecoque iapeto. Origine levius nam. Silvas valles temperiemque forma? Ignotas tegit. Hunc ligavit: summaque freta illas invasit deerat proximus. Caelo calidis securae mentes pronaque traxit.

Caligine omnia gentes. Posset aere certis eurus titan verba unus homini ora. Sed volucres. Campos effervescere flamina illi pondus umor. Cinxit obstabatque secrevit. Ligavit: natus aberant. Indigestaque regio rapidisque carmen coegit erat discordia liquidas. Ripis nix horrifer terrae dei tepescunt ad vos regio.

Nabataeaque fronde pluviaque vos terra tellure flexi. Neu habendum poena locoque ne. Dedit locoque nunc nebulas. Mentisque liquidum summaque porrexerat cepit. Litem mare. Surgere adhuc ipsa. Orbem hanc volucres iapeto habentem. Dissociata otia inminet nubibus passim erant iners. Semina praecipites reparabat spectent fuerat.</div>