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

前端之家收集整理的这篇文章主要介绍了css – 如何使标签的文本适合其宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

脚本:

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

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

最佳答案
添加

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

您可以通过添加文本溢出:省略号来获得期望效果添加三个点以避免突然切割文本;属性.
注意:text-overflowonly只能在一行文本中工作(不是多行).

TEST

更新:

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

TEST

原文链接:https://www.f2er.com/css/427365.html

猜你在找的CSS相关文章