Question

这是我的HTML，

<ul class="test">
    <li><a href="#">python</a></li>
    <li><a href="#">Truncate should apply here </a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">cpp</a></li>
    <li><a href="#">java</a></li>
    <li><a href="#">.net</a></li>
    <li><a href="#">This is really a long text in this ul </a></li>
    <li><a href="#">This is another really a long text in this ul </a></li>
</ul>

如果文本的长度高于6个字符，我想截断锚标记中的文本。

输出应该是，

    python
    Trun..
    c
    cpp
    java
    .net
    This..
    This..

我如何使用Jquery做到这一点？

Answer 1

您可以这样做：

$('ul.test li a').each(function() {
    var text = $(this).text();
    if(text.length > 6) {
        $(this).text(text.substring(0, 4) + '..')
    }
});

<强> Fiddle Demo

如果您想使用纯CSS，那么您可以使用text-overflow: ellipsis属性：

ul.test li a {
    width: 45px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

但是，在使用此方法设置省略号之前，您无法控制有限字符的数量。

<强> Fiddle Demo

Answer 2

尝试以下CSS

a {
    width: 50px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

http://jsfiddle.net/W6EWF/

Answer 3

您可以使用vanilla JS解决方案并节省一些资源（也很简短）：

var As = document.getElementsByTagName("a");       // all the `a` elements

for(var  i = 0, len = As.length;i < len; i++){      // iterate over them

    // cut them by 6 characters, and set the new value
    As[i].innerHTML = As[i].innerHTML.substr(0, 6);
}

DEMO

或者，如果您不想剪切文本并永久丢失，可以使用CSS中的text-overflow属性。

Answer 4

您可以使用以下内容作为开头，并将其与一些if..else语句结合使用，以获得所需的输出。

$(".test li a").each(function(index){
    $(this).text($(this).text().substring(0,4)+"...")
})

JSFiddle Demo

使用CSS的另一种方法可以在这个JSFiddle演示中找到：http://jsfiddle.net/7Ues5

Answer 5

这样做。

      $(document).ready(function () {
        $("button").click(function () {
          for (i = 0; i < $("a").length; i++)
            {
               if ($("a")[i].text.length > 6)
                {
                    $("a")[i].text = $("a")[i].text.substring(0,4)+"..";
                }
            }
        });
    });

截断ul li锚标记中的文本

5 个答案: