Clever Geek Handbook

How to make label text fit within its width

I have a label in an html document, it has a fixed width, but when the text exceeds the width of the label, it goes to the second line, I want the text to fit the given width, no matter if it shows the original 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 a fiddle http://jsfiddle.net/rd79bpwn/

+3


source to share


3 answers


Adding:

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

You can get the desire effect and also add three dots to avoid sharp cutting of the text by adding an attribute text-overflow: ellipsis;

. Note: text-overflow

only works on single line texts (not many lines).

TEST



UPDATE:

So, you want to always show the trailing portion of the text no matter which and the leading portion that overflows should be hidden. Like this?

TEST

+1


source


Then a simple usage white-space: nowrap

:

violin



Take a look here white-space-prop

+6


source


try it

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


source






More articles:


All Articles