Html 限制跨度显示的字符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33718245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Limit characters displayed in span
提问by Mark
Is there some sort of way within HTML or CSS to limit the characters displayed with a span? I use a repeater that displays these info boxes and I want to limit the characters to the first 20 characters and if the input has more, then just concatenate? The box is like image shown:
HTML 或 CSS 中是否有某种方法来限制用跨度显示的字符？我使用显示这些信息框的中继器，我想将字符限制为前 20 个字符，如果输入有更多字符，那么只需连接？盒子就像图片所示：
My code for this is:
我的代码是：
<span class="claimedRight" maxlength="20">{{ item.provider }}</span>
回答by Samuel Cook
Here's an example of using text-overflow:
这是使用文本溢出的示例：
.text {
display: block;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}<span class="text">Hello world this is a long sentence</span>回答by Alex
You can use css ellipsis;but you have to give fixed width and overflow:hidden:to that element.
您可以使用 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>回答by Santu Roy
You can do this with jQuery :
你可以用 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>回答by Olivier
You can use the CSS property max-widthand use it with chunit.
And, as this is a <span>, use a display: inline-block;(or block).
您可以使用 CSS 属性max-width并将其与ch单位一起使用。
并且，由于这是 a <span>，请使用 a display: inline-block;（或块）。
Here is an example:
下面是一个例子：
<span style="
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 13ch;">
Lorem ipsum dolor sit amet
</span>
Which outputs:
哪些输出：
Lorem ipsum...
<span style="
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 13ch;">
Lorem ipsum dolor sit amet
</span>回答by Donnie D'Amato
Yes, sort of.
是的，有点。
You can explicitly size a container using units relative to font-size:
您可以使用相对于字体大小的单位来明确调整容器的大小：
- 1em = 'the horizontal width of the letter m'
- 1ex = 'the vertical height of the letter x'
- 1ch = 'the horizontal width of the number 0'
- 1em = '字母 m 的水平宽度'
- 1ex = '字母 x 的垂直高度'
- 1ch = '数字0的水平宽度'
In addition you can use a few CSS properties such as overflow:hidden;white-space:nowrap;text-overflow:ellipsis;to help limit the number as well.
此外，您还可以使用一些 CSS 属性overflow:hidden;white-space:nowrap;text-overflow:ellipsis;来帮助限制数量。
回答by Samir
max-lengthis used for inputelements. Use text-overflowproperty of CSS.
max-length用于input元素。使用text-overflowCSS 的属性。
.claimedRight {
display:block; width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
回答by Tran Anh Hien
use js:
使用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)+'...');
}
});
});
