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?

回答1:

You can do this without JS.

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

回答2:

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.

来源：https://stackoverflow.com/questions/20372399/use-jquery-display-a-text-in-a-limited-label