如何使標籤的文本適合其寬度

我在html文檔中有一個標籤，它有一個固定的寬度，但是當文本超過標籤的寬度時，它會轉到第二行，我希望文本適合給定的寬度，不管它不顯示啓動文本.. 下面是代碼如何使標籤的文本適合其寬度

<div style="width:50%"> 
    <label id="mlbl" style="width:50%;">text</label> 
</div> 
<button id="mbtn">click</button>

腳本：

$('#mbtn').click(function() { 
    $('#mlbl').text('asdasda gfgfg ad ad asd ad asd asd ad ad '); 
});

2014-08-29 Adil Waqar

變化'lable'到'label'。這不是解決方案，而是一個名爲'lable'的標籤不存在:) – Roman 2014-08-29 07:53:42

在這裏使用'label'不會有用，除非添加'for =「mbtn」'屬性來將它與控件相關聯。 – 2014-08-29 08:05:56

「不管它是否顯示起始文本」是什麼意思？如果內容不符合一行，應該省略內容的*開頭*應該將內容截斷（即使在一個字裏面，或者在一個字母裏面）？ – 2014-08-29 08:07:43

添加：

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

你可以得到渴望的效果，並通過添加加三個點，以避免削減文本突然text-overflow: ellipsis;屬性。注意：text-overflow只適用於一行文本（不是多行）。

UPDATE：

所以，你要始終顯示文本的末尾部分不管是什麼，並且溢出應該被隱藏的初始部分。喜歡這個？

2014-08-29 08:00:16 ErwinGO

這會跳過結束文本，我希望當標籤中的文本溢出時，可以跳過開始文本。可能嗎？ – 2014-08-29 09:45:25

如果它仍然相關我更新了你想要的答案。有可能這樣做，當文本通過css溢出時，在開始時添加三個點是不可能的。 – ErwinGO 2014-08-29 18:33:37

不需要三個點...謝謝，你通過幫助我讓我的早晨更好:) – 2014-09-01 05:07:41

然後SIMPL e，利用white-space: nowrap：

2014-08-29 07:51:12

這會跳過結尾文字，當標籤中的文本溢出時，我想讓文本跳過。可能嗎？ – 2014-08-29 10:18:45

嗯不知道你的意思是：S – 2014-08-29 10:29:56

就好像標籤中包含「你好嗎？」包裝後顯示「...你是誰？」 – 2014-08-29 10:31:56

試試這個

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

2014-08-29 08:54:46

回答