javascript - Truncate Text in ul li anchor tag - Stack Overflow

admin管理员组

文章数量:1296468

Here is my 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="#"></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>

I want to truncate the text in anchor tag , if the length of text is higher than 6 chars.

The output should like ,

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

How can i do this using Jquery ?

Here is my 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="#"></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>

I want to truncate the text in anchor tag , if the length of text is higher than 6 chars.

The output should like ,

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

How can i do this using Jquery ?

• javascript
• jquery
• html

Share Follow asked Mar 24, 2014 at 7:35 Nishant NawarkhedeNishant Nawarkhede 8,4001313 gold badges6161 silver badges8383 bronze badges 1

• 3 this can be done with css by giving width and applying overflow – Bhojendra Rauniyar Commented Mar 24, 2014 at 7:36

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You can do something like this:

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

Fiddle Demo

---

If you want to use pure CSS then you can use text-overflow: ellipsis property:

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

However, you cannot control the number of limited characters before putting ellipsis using this approach.

Fiddle Demo

Try below CSS

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

http://jsfiddle/W6EWF/

You can use a vanilla JS solution and save some resources (and it's short too):

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

Or, you can use the text-overflow property in CSS if you don't want to cut the text and lose it forever.

You can use the following as a start and bine it with some if..else statements to get the desired output.

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

JSFiddle Demo

Another way of doing it using CSS can be found at this JSFiddle Demo: http://jsfiddle/7Ues5

This will do it.

      $(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)+"..";
                }
            }
        });
    });   

本文标签： javascriptTruncate Text in ul li anchor tagStack Overflow