Limit characters displayed in span

后端未结

关注

 7  2245

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 character

相关标签:

7条回答

耶瑟儿～

2020-12-13 07:04

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>

0 讨论(0)

长情又很酷

2020-12-13 07:08
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

有刺的猬

2020-12-13 07:17

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>

0 讨论(0)

孤街浪徒

2020-12-13 07:21

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>

0 讨论(0)

伪装坚强ぢ

2020-12-13 07:21

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

0 讨论(0)

日久生厌

2020-12-13 07:23

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>

0 讨论(0)

1 2 下一页