CODEWITHSUNDEEP
javascripthtmlcss
Avisek Chakraborty
Avisek Chakraborty

Reputation: 8309

Wrap and remove extra characters

is there a way to remove unwrappable characters which cant fit inside an Element.

For example-

if there is a list with specific width-

<ul>
    <li>First word</li>
    <li>This is a long long long word</li>
    <li>Another word</li>
</ul>

with this Style-

ul li
{
    width:100px;
    height:20px;
    border:1px solid black;
}

Then, the long item text will be wrapped into second line.

How can I remove the extra un-wrappable words/characters ?

Here is the Fiddle: http://jsfiddle.net/N9ct3/1/

Edit: There can be multiple list-items with different width- So, substring by counting the characters- might not be a solution & also workable for ie8+

Upvotes: 0

Views: 42

Answers (2)

micha
micha

Reputation: 49582

You can add the css rule overflow: hidden; to the list items.

ul li
{
    width:100px;
    height:20px;
    overflow: hidden;
    background-color:lightblue;
    border:1px solid black;
}

Upvotes: 2

sdespont
sdespont

Reputation: 14025

By adding text-ellipsis for exemple : http://jsfiddle.net/N9ct3/2/

ul li
{
    width:100px;
    height:20px;
    background-color:lightblue;
    border:1px solid black;

    //Avoid text overflow by adding "..."
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Upvotes: 3

Related Questions