Question

我需要根据父级的宽度调整元素的宽度，并在末尾添加省略号。这就是我所拥有的。看起来很直接，但我似乎无法添加省略号。我错过了什么？

<style>
.myClass{
    white-space: nowrap;
    overflow: hidden;
}
</style>

$(".myClass").each(function() {
    var str = $(this);
    var par = str.parent().width();
    var newWidth = par - 20; // to allow room for ellipsis
    str.width(newWidth);
    str.append("...");
});


<div style="width: 100px">
    <span class="myClass">My long text string here. Even longer goes on and on.</span>
</div>

Answer 1

而不是.append（）尝试str.text(str.text()+"…");

Answer 2

不得不做出一些改变。最大的问题是display:hidden表示您添加的...将被剪掉。您需要将...附加到父元素。另外，我将span更改为display:inline-block;，以便display:hidden正常工作。

http://jsfiddle.net/u6XfD/

注意：这不是一个好主意，因为你可以在那个小提琴中看到，它可能会在中间切掉字符。

Answer 3

$(".myClass").each(function() {
    var str = $(this);
    var par = str.parent().width();
    var newer = par - 20; // to allow room for ellipsis
    str.width(newer);
    $("...").appendTo(str);
});

根据父级调整宽度，并使用/ jQuery添加省略号

3 个答案: