标签: dotdotdot

使用jQuery dotdotdot插件,我想有一个更多和更少的按钮来显示和隐藏<div>当有很多文本要显示时的整个内容." 更多"按钮工作正常,但我还没有找到一种方法来返回<div>它的原始显示.请注意,这不仅仅是关于如何使用dotdotdot扩展截断的字符串,因为它包含Less按钮重新截断长字符串.

这是我的代码:

$(function() {
    $("div.ellipsis-text").dotdotdot({
        after: 'a.more',
        callback: dotdotdotCallback
    });
    $("div.ellipsis-text").find("a").click(function() {
        if ($(this).text() == "More") {
            var div = $(this).closest('div.ellipsis-text');
            div.trigger('destroy').find('a.more').hide();
            div.css('max-height', '');
            $("a.less", div).show();
        }
        else {
            $(this).text("More");
            $(this).closest('div.ellipsis-text').css("max-height", "50px").dotdotdot({ after: "a", callback: dotdotdotCallback });
        }
    });

    function dotdotdotCallback(isTruncated, originalContent) {
        if (!isTruncated) {
         $("a", this).remove();   
        }
    }
});

看来,click事件处理程序<div>的锚标记是越来越删除,我从来没有能够在后到达事件处理程序的更多按钮被点击.

解决方案:

更新的代码:

$(function() {
    $("div.ellipsis-text").dotdotdot({
        after: 'a.more', …

我有我的代码的例子:

  <div class="container">
    <div class="item n1">Proe Schugaienz</div>
    <div class="item n2">Proe Schugaienz</div>
  </div>

我使用这样的jQuery代码:

$('.item').dotdotdot({
  wrap: 'word',
  fallbackToLetter: false
})

和css:

.item {
  margin: 5px;
  background: red;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.n1 {
  width: 8px;
}

.n2 {
  width: 80px;
}

但结果我得到:

结果我想实现这个:

是纯粹的CSS还是dotdotdot.js？如果单词(句子)不匹配它的父级:那么只显示默认的单行文本溢出,如果单词(句子)能够逐字适合父 - 然后匹配它,没有字母连字符!

所以我不希望我的容器被高度扩展(我有很多数据,它只是一个例子,我不能硬编码一些块)

https://plnkr.co/edit/IxS0CReJicRfDdeGpoPo?p=preview

我使用dotdotdot截断高度指定框中的文本

<div class="product-description dotdotdot" style="word-wrap: break-word;">
    <div class="product-description-icon">
        <span>
            <img src="product_gloves.png" alt="Gloves">
        </span>
    </div>
    <h4>Gloves</h4>
    <p>Some gloves text...</p>
</div>

jQuery:

$(".product-description.dotdotdot").dotdotdot({
    watch: true
});

我product-description dotdotdot的最小高度为100px,文本末尾有省略号,但文本没有截断,仍然有很多可用空间.

谢谢您的帮助

我试图在使用dotdotdot插件的面板中显示评论列表,但结果并不欢呼:

从下面的xhtml代码:

<li>
    <h:link value="#{Comment.commentAuthorName}: " id="goToProfileWithAuthorName"
            outcome="/profile.xhtml" type="submit"
            style="text-decoration:none;font-weight:bold;font-size: 11px;color: rgb(120,120,159);">
        <f:param name="userId" value="#{Comment.comauthorId}"/>
    </h:link>

    <div id="wrapper">
        #{Comment.commentText}
    </div>
    <br></br>
    <abbr class="timeago" title="#{Comment.commentDate}"
          style="color: #778899;font-size: 10px;">
    </abbr>

    <br/>
</li>

并在js代码下面:

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //  configuration goes here
    });
})

如果我解决了溢出的问题,我可以解决垂直尺寸问题,但我想猜测dotdotdot是不正确的.让我再向你展示一个奇怪的事情:

正如您所看到的,似乎div(包装器)宽度值正确计算但文本仍然溢出.可能是什么原因？

谢谢你的帮助.

我正在使用jQuery dotdotdot截断插件dotdotdot.frebsite.nl

我想截断最多2行.当用户点击时more,它必须显示全文(展开/解除截断).

到目前为止,我"只"设法截断我的文本.但不要"去截断"它.

这是我的代码:

<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tellus eu dui placerat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a class="read-more" href="#">more</a></p>

$(document).ready(function(){

    $('.truncate').dotdotdot({
        ellipsis     : '… ',
        watch        : true,
        wrap         : 'letter',
        height       : parseInt( $('.truncate').css('line-height'), 10) * 2, // this is the number of lines
        lastCharacter: {
            remove: [ ' ', ',', ';', '.', '!', '?' ],
            noEllipsis: []
        },
        after: "a.read-more"
    }); …

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
function fun()
{
    console.log(arguments)
}
const fun1 = (...n) =>{
    console.log(n)
}
fun.call(...arr1, ...arr2)

输出：[对象参数] { 0: -2, 1: 3, 2: 4, 3: 8, 4: 3, 5: -8, 6: 1 }

fun1.call(...arr1,...arr2)

输出：[-2, 3, 4, 8, 3, -8, 1]

arr1 和 arr2 组合有 8 个值，但输出只有 7 个值，为什么？如何获取所有值？