jquery 如何根据div高度截断文本?

mbyulnm0  于 2023-04-05  发布在  jQuery
关注(0)|答案(6)|浏览(150)

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

有人能帮忙吗?

7lrncoxx

7lrncoxx1#

试试下面的CSS:

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

这只适用于单行。对于多行,您需要JavaScript

ltqd579y

ltqd579y2#

这个问题是用javascript标记的,所以这里是缺少的答案。
您可以遍历每个字符或单词(如本例所示),同时检查高度是否低于所需的高度。在每个truthy步骤中,您可以用其文本覆盖元素内容,但不覆盖最后一个单词/字符。
在converte这个例子中,我把字符串转换成一个数组,并在每次迭代时对它进行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>
mjqavswn

mjqavswn3#

使用overflow: hidden...如果你发布更多的代码,我可以得到更具体的。-j-man 86刚刚编辑

nnvyjq4y

nnvyjq4y4#

要隐藏文本,有一个简单的解决办法,添加overflow:hidden css属性在div中like follow

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

然而,为了在最后显示...,你需要在javascript中获取div的内容,并在那里使用substr函数。这将是一个反复试验的解决方案,以确定在div中可以显示多少个字符。

baubqpgj

baubqpgj5#

如前所述,解决这个问题最简单的方法是将overflow:hidden添加到div的CSS样式中。
然而,这不会帮助您在 Package 的末尾添加省略号(点),并且我不知道单独使用CSS来做多行文本 Package (以末尾的3个点结束)。
更简单的方法是使用jQuery(或类似的JavaScript库)来 Package 文本,并在末尾添加3个点。示例:
Reference to another StackOverflow post about wrapping content using CSS and jQuery for single line and multi line text.
有时也建议在服务器端处理内容,然后在页面上显示处理后的内容,但有时只使用JavaScript更方便(或更快/更容易)。
这里有一个jQuery插件,可以做到这一点:jQuery DotDotDot

yhuiod9q

yhuiod9q6#

如果你想剪切并显示...,并且你知道你想要的最大字符数,你可以有条件地切片它:

const truncateDesc = description.length > 300 ? description.slice(0, 300).concat("...") : description;

相关问题