Question

在HTML或CSS中是否有某种方式限制用span显示的字符？我使用一个显示这些信息框的转发器，我想将字符限制为前20个字符，如果输入有更多，那么只是连接？该框如图所示：

我的代码是：

<span class="claimedRight" maxlength="20">{{ item.provider }}</span>

Answer 1

以下是使用文本溢出的示例：

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

<span class="text">Hello world this is a long sentence</span>

Answer 2

您可以使用CSS属性max-width并将其与ch单元一起使用。
并且，由于这是<span>，所以请使用display: inline-block;（或块）。

这里是一个示例：

<span style="
  display:inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13ch;">
Lorem ipsum dolor sit amet
</span>

哪个输出：

Lorem ipsum...

<span style="
  display:inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13ch;">
Lorem ipsum dolor sit amet
</span>

Answer 3

您可以使用css ellipsis;，但必须为该元素指定固定宽度和overflow:hidden:。

<span style="display:block;text-overflow: ellipsis;width: 200px;overflow: hidden; white-space: nowrap;">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
	</span>

Answer 4

max-length用于input个元素。使用CSS的text-overflow属性。

.claimedRight {
    display:block; width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 5

是的，有点。

您可以使用相对于font-size的单位显式调整容器大小：

1em ='字母m'的水平宽度
1ex ='字母x'的垂直高度
1ch ='数字0'的水平宽度

此外，您可以使用一些CSS属性，例如overflow:hidden; white-space:nowrap; text-overflow:ellipsis;来帮助限制数量。

Answer 6

您可以使用jQuery完成此操作：

$(document).ready(function(){
  
  $('.claimedRight').each(function (f) {

      var newstr = $(this).text().substring(0,20);
      $(this).text(newstr);

    });
})

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <span class="claimedRight" maxlength="20">Hello this is the first test string. 
    </span><br>
    <span class="claimedRight" maxlength="20">Hello this is the second test string. 
    </span>
    
    
</body>
</html>

Answer 7

使用js：

 $(document).ready(function ()
   { $(".class-span").each(function(i){
        var len=$(this).text().trim().length;
        if(len>100)
        {
            $(this).text($(this).text().substr(0,100)+'...');
        }
    });
 });

限制以span显示的字符

7 个答案: