在 HTML 或 CSS 中是否有某种方式来限制跨度显示的字符？我使用一个显示这些信息框的中继器，我想将字符限制为前 20 个字符，如果输入有更多，那么只需连接？盒子如图所示：
我的代码是：
<span class="claimedRight" maxlength="20">{{ item.provider }}</span>
【问题讨论】：
maxlength 是输入元素属性。您可以为项目设置宽度并在 CSS 中使用 text-overflow: ellipsis。 CSS 无法限制字符，因为它不能用于文本节点。
这是一个使用文本溢出的例子：
.text {
display: block;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}<span class="text">Hello world this is a long sentence</span>【讨论】：
em 单位，以便适合您容器的文本量随字体大小缩放。
您可以使用 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>【讨论】：
您可以使用 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>【讨论】：
你可以用 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>【讨论】：
max-length 用于input 元素。使用 CSS 的text-overflow 属性。
.claimedRight {
display:block; width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
【讨论】：
使用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)+'...');
}
});
});
【讨论】：
是的，有点。
您可以使用相对于字体大小的单位显式调整容器的大小：
此外，您还可以使用一些 CSS 属性，例如 overflow:hidden; white-space:nowrap; text-overflow:ellipsis; 来帮助限制数量。
【讨论】：