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

【问题标题】：How to make text of a label fit within its width如何使标签的文本适合其宽度
【发布时间】：2014-08-30 02:31:11
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

添加：

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

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

更新：

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：