我目前有一个jQuery片段,当子字符串大于父容器时会成功截断我的文本(见下文)。
var initial = $('.js-text').text();
$('.js-text').text(initial);
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
$('.js-text').text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
我已经使用了我的语义,因为我计划在现有标记中的多个位置使用这个小jQuery组件,如下所示:
<div class="existing-first-div-container js-text-truncator">
<p class="existing-first-string js-text">The quick brown fox</p>
</div>
<div class="existing-second-div-container js-text-truncator">
<p class="existing-second-string js-text"> jumped over the lazy red dog.</p>
</div>
如果你已经读过这篇文章并且已经猜到了我的问题,那就不胜感激......
所以问题是我的jQuery存储文本,但它存储所有文本。所以这两个现有的div都被截断了,但两个都结束了阅读&#34;快速的棕色狐狸跳过懒惰的红狗。&#34;而不是第一次阅读&#34;快速的棕色狐狸&#34;和第二读&#34;跳过懒惰的红狗。&#34;
是否有可能以我想要的方式使用我的js-text-truncator作为我的标记的扩展,而不是一次性存储所有截断的文本实例?
答案 0 :(得分:1)
.text
明确说明
获取匹配元素集合中每个元素的组合文本内容,包括其后代,或设置匹配元素的文本内容。
使用.js-text
获取元素集后,对其进行.each
,然后分别获取,截断并设置.text
。
如果你希望它在窗口重新调整大小时重新运行,我建议你通过超时来执行它(因此代码在窗口停止调整大小至少400ms后运行一次)。如果没有这种解决方法,它往往会对性能产生沉重的负担。
var resizeTimeout = false;
$(window).resize(onWindowResize); // bind resize event.
trimAllText(); //run once at start.
function onWindowResize() {
if(resizeTimeout){
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(function(e){
resizeTimeout = false;
// this is code that is ran at the "end" of a resize.
trimAllText();
}, 400);
}
function trimAllText(){
var initialElements = $('.js-text');
initialElements.each(function(){
var elem = $(this);
while(elem.outerHeight() > elem.closest('.js-text-truncator').height()) {
elem.text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
});
});
}