javascript - 如何截断关于 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 样式。

但是，这不会帮助您在换行末尾添加省略号（点），而且我不知道仅使用 CSS 进行多行文本换行（以 3 个点结尾）。

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

参考另一篇关于使用 CSS 和 jQuery 为单行和多行文本包装内容的 StackOverflow 帖子。

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

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

Answer 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>