Question

I need to set a maximum widht to a label tag and avoid the text overflow with jquery.

Is there an elegant way to do it?

Answer 1

Specify a width, width: 50px (say), on the label. Since label is an inline element, you also need to specify display: block.

Now, what do you want to do in the case of an overflow? If you simply want to hide the text that doesn’t fit, use overflow: hidden. If you want it to wrap to the next line, it’ll automatically do this as per the specifications above, unless there is a long piece of non-breakable text (i.e. that doesn’t contain any whitespace). In that case, you need to identify the string of characters that would be too long (I’ve used 15 in the example below), and inject a space between them:

$('#wrap').text($('#wrap').text().replace(/(\S{15})/g, '$1 '));