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/

Answer 1

Then simple use white-space: nowrap:

fiddle

Take a look here white-space-prop

Answer 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