How to make text of a label fit within its width

Question

I have a label in html document, it has a fixed width but when the text exceeds the label's width it goes to 2nd line, I want to the text to fit in given width, no matter if it doesn't show the starting text.. Here is the code

<div style="width:50%">
    <label id="mlbl" style="width:50%;">text</label>
</div>
<button id="mbtn">click</button>

Script:

$('#mbtn').click(function() {
  $('#mlbl').text('asdasda gfgfg ad ad asd ad asd asd ad ad ');
});

Here is the Fiddle http://jsfiddle.net/rd79bpwn/

Change `lable` to `label`. It isn't the solution but a tag called `lable` doesn't exist :) — roemel, Aug 29 '14 at 07:53
Use of `label` ins’t useful either here, unless the attribute `for="mbtn"` is added to associate it with the control. — Jukka K. Korpela, Aug 29 '14 at 08:05
What does “no matter if it dont show the starting text” mean? That the *start* of the content should be omitted if the content does not fit on one line? And should be content be just truncated (even within a word, or within a letter)? — Jukka K. Korpela, Aug 29 '14 at 08:07
possible duplicate of [How to turn off word wrapping in HTML?](http://stackoverflow.com/questions/4652654/how-to-turn-off-word-wrapping-in-html) — , Aug 29 '14 at 08:12

score 6 · Answer 1 · answered Aug 29 '14 at 07:51

6

Then simple use white-space: nowrap:

fiddle

Take a look here white-space-prop

answered Aug 29 '14 at 07:51

Alex Char

32,879
9
49
70

this skips the end text, i want starting text to skip when text in label overflows. is it possible ? – AddyProg Aug 29 '14 at 10:18
Hmm not sure what you mean :S – Alex Char Aug 29 '14 at 10:29
like if the label contains "hello how are you?" after wrapping it shows "...are you?" – AddyProg Aug 29 '14 at 10:31
Can't see this issue. Can you create a fiddle to demonstrate that problem? – Alex Char Aug 29 '14 at 10:34
Really can't see an issue here. I can see entire text. – Alex Char Aug 29 '14 at 10:59

goerwin · Accepted Answer · 2014-08-29T18:31:11.277

2

Adding:

label{
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

You can get the desire effect and also adding three dots to avoid cutting the text abruptly by adding the text-overflow: ellipsis; attribute. Note: text-overflowonly works in one line texts (Not multiple line).

TEST

UPDATE:

So you want to always show the end part of the text no matter what and the initial part that overflows should be hidden. Like this?

TEST

edited Aug 29 '14 at 18:31

answered Aug 29 '14 at 08:00

goerwin

1,231
10
20

this skips the end text, i want starting text to skip when text in label overflows. is it possible ? – AddyProg Aug 29 '14 at 09:45
1

If it's still relevant I updated the answer with what you want. It's possible to do, what it's not posibble is to add the three dots at the start when the text overflows via css. – goerwin Aug 29 '14 at 18:33
no need for three dots ... Thanks, u made my morning better by helping me :) – AddyProg Sep 01 '14 at 05:07

score 2 · Answer 3 · edited Aug 29 '14 at 09:56

2

try this

 #mlbl
              {
                overflow : hidden;
                width : 100%;
              }

edited Aug 29 '14 at 09:56

AddyProg

2,960
13
59
110

answered Aug 29 '14 at 08:54

Gaurav Kachhadiya

19
2

How to make text of a label fit within its width

3 Answers3