CODEWITHSUNDEEP
jqueryhtmlcsslabel
Nitter Kio
Nitter Kio

Reputation: 35

Use jQuery display a text in a limited label

I have a label and it's length is limited. I want to do this: when the text's length is longer than the label, the end words of text will instead of "..."

How can do this with jQuery or JavaScript?

I have no idea of this, any advise?

Upvotes: 0

Views: 213

Answers (2)

Anon
Anon

Reputation: 2874

You can do this without JS. 

label{
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow:hidden;
}

Upvotes: 1

Nitesh
Nitesh

Reputation: 15749

This can be done with pure CSS. For instance, use text-overflow:ellipsis;

You will get what you are looking for.

WORKING DEMO

The HTML:

<div style="position: absolute; left: 20px; top: 50px; 
  width: 120px; height: 50px; border: thin solid black;
  overflow: hidden; text-overflow: ellipsis">
  <nobr>This is a NOBR section</nobr>
</div>

The CSS:

div { position: absolute; left: 20px; top: 50px; width: 120px; height: 50px; border: thin solid black; overflow: hidden; text-overflow: ellipsis }

Hope this helps.

Upvotes: 1

Related Questions