如何截断关于 div 高度的文本？答案

【问题标题】：how to truncate text with respect to div height?如何截断关于 div 高度的文本？
【发布时间】：2012-08-11 12:16:32
【问题描述】：

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

有人可以帮忙吗？

【问题讨论】：

【解决方案1】：

试试下面的 CSS：

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

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

【讨论】：

@ZainShaikh，修复了你的小提琴：jsfiddle.net/dBxes/7。在这个答案中，最后一个样式不正确，应该是white-space: nowrap;
@VsevolodKrasnov 您的小提琴不会将线换行到 150px 高度。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

但是要显示 ... 最后，您需要在 javascript 中获取 div 的内容并在那里使用 substr 函数。这将是尝试和错误的解决方案，以确定 div 中可以显示多少个字符。

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

这个问题是用 javascript 标记的，所以这里是缺少的答案。

您可以遍历每个字符或单词（如本例所示），同时检查高度是否低于您想要的高度。在每一个真实的步骤中，您都可以用其文本覆盖元素内容，但没有最后一个单词/字符。

在转换这种情况下，我将字符串转换为数组，并在每次迭代时将其转换为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>

【讨论】：