2011-04-27 96 views
0

HTML中有一個特性,即標籤具有特定的寬度,當它需要在其給定的寬度上渲染時,它應該剪切並顯示...。在工具提示中,顯示完整的實際名稱。HTML支持寬度剪裁標籤嗎?

事情是這樣的:

enter image description here

回答

3

嘗試text-overflow:ellipsisoverflow:hidden CSS樣式。它們必須一起使用,否則文本溢出將被忽略。

所有瀏覽器(特別是IE)都可能不支持文本溢出,因此您的測試做得很好。

+1

[當前瀏覽器支持](http://maettig.com/code/css/text-overflow-ellipsis.html) – pintxo 2011-04-27 10:00:19

+0

@cmmi,太棒了! +1 – 2011-04-27 10:04:20

0

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

一種選擇裁剪標籤文字與溢出和空白財產沿着設定的最大寬度財產。要顯示...,您需要使用文本溢出:省略號。

.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>