Overflow of label tag will cause overlapping text.

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create a label tag for an input item, and have the label text be greater
than 13 characters.
2. Load the webpage

What is the expected output? What do you see instead?
Label field width's to be adjusted accordingly, instead the text of the
input box and label field overlap.

What version of the product are you using? On what operating system?
v0.11 7/16/2007 on an iPhone

Original issue reported on code.google.com by maher...@gmail.com on 19 Jul 2007 at 10:43

[GoogleCodeExporter]

Is there any solution to this that you have determined?

Original comment by bvelasquez on 22 Jun 2008 at 1:42

[GoogleCodeExporter]

The problem is with the input class in css.

change padding to 110px ( you will need to check the maximum text in your
screen/form). By default its 44px which is causing the problem. 

input {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    margin: 8px 0 0 0;
    padding: 6px 6px 6px 110px;
    font-size: 16px;
    font-weight: normal;
}

Cheers 
Chintan Jajal

Original comment by jaj...@gmail.com on 2 Mar 2009 at 4:43

[GoogleCodeExporter]

Hello, I actually had to fix this same issue today. Below is what i used, then 
simply set your <label class="truncated">

.row > label.truncated {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    width:90px;
}

Original comment by andrewst...@gmail.com on 27 May 2009 at 8:29