CODEWITHSUNDEEP
htmlcss
Mark
Mark

Reputation: 1872

Limit characters displayed in span

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:

enter image description here

My code for this is:

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

Upvotes: 56

Views: 261740

Answers (8)

Aryan Agney
Aryan Agney

Reputation: 11

<!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="textlimit">4.3471230472308468902346802364373479037 
      </span><br>
      <span class="textlimit">Hello this is the second test string. 
      </span>
      <script>
         $(document).ready(function(){
         
         $('.textlimit').each(function (f) {
         
             var newstr = $(this).text().substring(0,5);
             $(this).text(newstr);
         
           });
         })
      </script>
   </body>
</html>

Upvotes: 0

OlivierLarue
OlivierLarue

Reputation: 2410

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>

Upvotes: 30

Santu Roy
Santu Roy

Reputation: 197

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>

Upvotes: 2

Tran Anh Hien
Tran Anh Hien

Reputation: 747

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)+'...');
        }
    });
 });

Upvotes: 1

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

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.

Upvotes: 0

Alex
Alex

Reputation: 8695

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>

Upvotes: 8

Samir Selia
Samir Selia

Reputation: 7065

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;
}

Upvotes: 1

Samuel Cook
Samuel Cook

Reputation: 16828

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>

Upvotes: 135

Related Questions