如何使标签的文本适合其宽度

Question

我在html文档中有一个标签，它有一个固定的宽度但是当文本超出标签的宽度时它会转到第二行，我希望文本适合给定的宽度，无论它是否为＆ ＃39; t显示起始文本.. 这是代码

<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 ');
});

这是小提琴http://jsfiddle.net/rd79bpwn/

Answer 1

然后简单地使用white-space: nowrap：

fiddle

看看white-space-prop

Answer 2

添加：

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

您可以通过添加text-overflow: ellipsis;属性来获得所需效果并添加三个点以避免突然切割文本。 注意：text-overflow仅适用于一行文本（非多行）。

TEST

<强>更新

因此，无论如何，您都希望始终显示文本的结尾部分，并且应隐藏溢出的初始部分。喜欢这个？

TEST

Answer 3

试试这个

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