How to Control The Width of a Label Tag

How can I control the width of a label tag?

Using CSS, of course...

label { display: block; width: 100px; }

The width attribute is deprecated, and CSS should always be used to control these kinds of presentational styles.

How to set the width of a label in HTML?

The width property does not apply to non-replaced inline elements (such as label).

Add display: inline-block and it will work.

FIDDLE

From the w3c spec on the width property:

Applies to: all elements but non-replaced inline elements, table
rows, and row groups

Also, see this answer which roughly sums up that non-replaced inline elements - means:

inline elements that can contain text like <a>, <span> <label> etc.

HTML set label width in css?

Use display: inline-block;

Explanation:

The label is an inline element, meaning it is only as big as it needs to be.

Set the display property to either inline-block or block in order for the width property to take effect.

How to control the size of label element in React?

Make forcefully take the label width 100% via width 100% in the label

 .DragDrop {
  width: 100%;
  height: 20vh;
  @include alignCenter();
   label{
    width:100%;
   }
 }

CSS width: not working in label

Use this css

label {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
float:left;
}
input{float:left;}

<!DOCTYPE HTML><!--Inform the Browser that the document is HTML--><html  lang="en-US"><head><meta charset="UTF-8"><head><style type="text/css">label {  width: 10em;  border-color: brown;  border-width: .25em;  border-style: double;  margin-right: .5em;      float:left;}input{float:left;}</style>  <title>Trying CSS </title>  </head>  <body><form  action="#">  <fieldset  >  <label> Name </label>  <input type="text"/>  <label  >Contact</label>  <input type="text" />  <label >Phone</label>  <input  type="text" />  <button type="button">Submit </button>  </fieldset>  </form></body></html>

css label width not taking effect

Do display: inline-block:

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
    display:inline-block
}

http://jsfiddle.net/aqMN4/

CSS, how to create a label width of the longest containing text?

You have to wrap each label-input combination in a element, and then wrap that element in some container. This container should have a min-width, and display: inline-block;.
Then you let all the input items float to the right, and you're done.

This results in a very simple, clean and semantic markup with eqaully clean and maintainable CSS, and no requirements for JavaScript, jQuery, or other fancy stuff.

You could make something like:

 <form>
     <fieldset>
         <p><label for="lorem">lorem</label><input type="text" id="lorem" /></p>
         <p><label for="ipsum">ipsum</label><input type="text" id="ipsum" /></p>
         <p><label for="li">li</label><input type="text" id="li" /></p>
     </fieldset>
 </form>

with the css

 fieldset {
     min-width: 100px;
     display: inline-block;
 }

 fieldset input{
     float: right;
 }

Here you can see how that looks.
Clearly you can style your form with margins, paddings etc.

And additionally if you want to have a wrapper that's semantically more accurate, you can use a ordered list. You can then style everything like you want to, and have even a nice additional wrapper (the <ol>) that you can use without adding semantic garbage.

A example would be:

 <form>
     <fieldset>
         <legend>First Example:</legend>
         <ol>
             <li><label for="lorem">lorem</label><input type="text" id="lorem" /></li>
             <li><label for="ipsum">ipsum</label><input type="password" id="ipsum" /></li>
             <li><label for="li">li</label><input type="text" id="li" /></li>
         </ol>
     </fieldset>

     <fieldset>
         <legend>Second Example:</legend>
         <ol>
             <li><label for="a">a</label><input type="text" id="a" /></li>
             <li><label for="b">b</label><input type="number" id="b" /></li>
             <li><label for="c">c</label><input type="range" id="c" /></li>
         </ol>
     </fieldset>

     <fieldset>
         <legend>Third Example:</legend>
         <ol>
             <li><label for="XXXXXXXX">XXXXXXXX</label><input type="email" id="XXXXXXXX" /></li>
             <li><label for="YYYYYYYYYYYY">YYYYYYYYYYYY</label><input type="search" id="YYYYYYYYYYYY" /></li>
             <li><label for="z">z</label><input type="text" id="z" /></li>
         </ol>
     </fieldset>
 </form>

styled by

  fieldset {
     border: 1px solid silver;
     margin: 10px;
     padding: 10px;
     min-width: 100px;
     display: inline-block;
 }

 fieldset li{
     width: 100%;
     display: block;
     position: relative;
 }

 fieldset label{
     margin-right: 10px;
     position: relative;
 }

 fieldset label:after{
     content: ": ";
     position: absolute;
     right: -0.2em;
 }

 fieldset input{
     float: right;
 }

would result in this view. You can even play around with it on this fiddle: http://jsfiddle.net/ramsesoriginal/b6Taa/

EDIT to show how this adds no markup

With the following html:

 <form>
     <label for="lorem">lorem<input type="text" id="lorem" /></label>
     <label for="ipsum">ipsum<input type="text" id="ipsum" /></label>
     <label for="li">li<input type="text" id="li" /></label>
 </form>

and the following CSS:

form{
    min-width: 100px;
    display: inline-block;
}

form input{
    float: right;
}

form label{
    display:block;
    margin-bottom: 2px;
}

You get the effect that you want. You can play around with it here. But adding <fieldsets> with <legend>s isn't adding unnecessary markup, on the contrary: it helps you to group the inputs. And adding a <ol> is semantically correct too, since the label/input combinations are semantic units and the form is a list of fields that have to be filled in a logical order.

Again, you can avoid the fieldsets, the lists, and everything and still achieve the desired effect, but semantically it would make sense to have at least the fieldset with a label..

EDIT2: this is how a "real" registration form with good semantic markup may look like:

 <form>
     <ol>
         <fieldset>
             <legend>Account</legend>
                 <li><label for="username">Username</label><input type="text" id="username" required  /></li>
                 <li><label for="password">Password</label><input type="password" id="password" required  /></li>
         </fieldset>

         <fieldset>
             <legend>Personal Data</legend>
                 <li><label for="name">Name</label><input type="text" id="name" /></li>
                 <li><label for="surname">Surname</label><input type="text" id="surname" /></li>
                 <li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
         </fieldset>

         <fieldset>
             <legend>Contact Information</legend>
                 <li><label for="email">E-mail</label><input type="email" id="email" required placeholder="example@example.com" /></li>
                 <li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
              pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
                 <li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
         </fieldset>

         <li><input type="submit" /></li>
     </ol>
 </form>

and the styling:

 fieldset {
     border: 1px solid silver;
     margin: 10px;
     padding: 10px;
     min-width: 100px;
     display: inline-block;
 }

 fieldset li{
     width: 100%;
     display: block;
     position: relative;
     margin-bottom: 2px;
 }

 fieldset label{
     margin-right: 10px;
     position: relative;
 }

 fieldset label:after{
     content: ": ";
     position: absolute;
     right: -0.2em;
 }

 fieldset input{
     float: right;
 }

 fieldset li .additionalInfo{
     position: absolute;
     padding: 5px;
     margin-top: 5px;
     display: none;
     background-color: white;
     border: 1px solid black;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     z-index: 10;
 }

 fieldset li:hover .additionalInfo{
     display: block;
 }

I included some additional info, to show you how it would all come together to one logical entity. Similarly you could include errors and whatever else you may want to include. This is just a quick example i threw together, but it's should show that you can achieve interesting things with this technique. One thing I also changed was that I put the <ol> directly under the form, so you don't have to repeat it for every fieldset. I personally find this somehow.. unpleasing, but since you want to have minimal markup, this would work pretty well and would be very accessible. Again, read this article if you haven't. It provides some great insight in marking up correctly a form.

Oh, and the "real-life" example is visible here: http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/

And you can play with it here:
http://jsfiddle.net/ramsesoriginal/b6Taa/9/

EDIT: i updated the last example

There was an error in my code. The wrapper element (the <li>in the second and in the last example, the <label> in the minimal one and the <p> in the first one should have at least 1 pixel margin at the bottom, or else some browsers see the input fields as overlapping and won't float them correctly. I updated the last example so that it works there, everywhere else you should keep this in mind.

Bootstrap 3 .control-label width?

The problem isn't the width of .control-label, it's the width of the columns, the bootstrap 3 default grid has 12 columns, if you assign col-XX-6 to .control-label it gets the first 6 colmuns (to the middle of the screen), and the same thing happend with the inputs.

you can also use text-align:center on the button container to make it centered.

See it on bootply

<div class="container-full">         
<form class="form-horizontal">
<fieldset>

<!-- Text input-->
<div class="form-group">
    <label class="control-label col-sm-6" for="name">Name</label>
    <div class="col-sm-6">
        <input id="name" value="Johnatan Dodsworth">
    </div>
</div>
<!-- Text input-->
<div class="form-group">
    <label class="col-sm-6 control-label" for="language">Based On</label>
    <div class="col-sm-6">
        <select id="language">
            <option selected="">English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Select Basic -->
<div class="form-group">
    <label class="col-sm-6 control-label" for="language">Type</label>
    <div class="col-sm-6">
        <select id="language">
            <option selected="">English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Button -->
<div class="form-group">
    <div class="col-sm-12 centered">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary "> <span class="k-icon k-si-plus"></span> Add</button>
    </div>
</div>

</fieldset>
</form>
</div>

How to make text of a label fit within its width

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?