Limit characters displayed in span
You can do this with 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>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;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>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>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="
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 13ch;">
Lorem ipsum dolor sit amet
</span>