Does HTML support clipping label for width?

Is there a feature in HTML that the label has a specific width and when it needs to render over its given width, it should clip and show 开发者_运维技巧.... And in the tooltip, the full actual name is shown.

Something like this:

Try the text-overflow:ellipsis and overflow:hidden CSS styles. They must be used together, or text-overflow will be ignored.

text-overflow may not be supported in all browsers (esp. IE) so do your testing well.

http://jsfiddle.net/jwB2Y/123/

One option to clip label text is setting the max-width property along with overflow and white-space property. To show … , you need to use text-overflow: ellipsis.

.inline-label { 
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    float:left;     
    }

.

<div>
    <label for="id1" class="inline-label">This is the dummy text i want to display::</label>
    <input type="text" id="id1"/>
</div>