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:
My code for this is:
<span class="claimedRight" maxlength="20">{{ item.provider }}</span>
The answer is
max-length is used for input elements. Use text-overflow property of CSS.
.claimedRight {
display:block; width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
You can use css ellipsis; but you have to give fixed width and overflow:hidden: to that element.
<span style="display:block;text-overflow: ellipsis;width: 200px;overflow: hidden; white-space: nowrap;">_x000D_
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat._x000D_
</span>You can use the CSS property max-width and use it with ch unit.
And, as this is a <span>, use a display: inline-block; (or 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="_x000D_
display:inline-block;_x000D_
white-space: nowrap;_x000D_
overflow: hidden;_x000D_
text-overflow: ellipsis;_x000D_
max-width: 13ch;">_x000D_
Lorem ipsum dolor sit amet_x000D_
</span>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'
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.
You can do this with jQuery :
$(document).ready(function(){_x000D_
_x000D_
$('.claimedRight').each(function (f) {_x000D_
_x000D_
var newstr = $(this).text().substring(0,20);_x000D_
$(this).text(newstr);_x000D_
_x000D_
});_x000D_
})<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<title></title>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<span class="claimedRight" maxlength="20">Hello this is the first test string. _x000D_
</span><br>_x000D_
<span class="claimedRight" maxlength="20">Hello this is the second test string. _x000D_
</span>_x000D_
_x000D_
_x000D_
</body>_x000D_
</html>use 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)+'...');
}
});
});
Source: Stackoverflow.com