怎么实现CSS限制字数,超出部份显示点点点

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么实现CSS限制字数,超出部份显示点点点相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<style> 
div.test

white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;

</style>
</head>
<body>

<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见,文本被修剪了。</p>

<p>这个 div 使用 "text-overflow:ellipsis" :</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>这个 div 使用 "text-overflow:clip":</p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

参考技术A text-overflow:ellipsis;

jquery字数限制超出显示...,原有内容在title中显示

为标签添加class = sliceFont;添加data-num属性为要显示的字数,截取后会在title中显示原有字符串;

$(‘.sliceFont‘).each(function(index, el) {
   var num = $(this).attr(‘data-num‘);
   var text = $(this).text();
   var len = text.length;
   $(this).attr(‘title‘,$(this).text());
   if(len > num){
    $(this).html(text.substring(0,num) + ‘...‘);
   }
});

 

以上是关于怎么实现CSS限制字数,超出部份显示点点点的主要内容,如果未能解决你的问题,请参考以下文章

怎么实现CSS限制字数,超出部份显示点点点

js控制当字数超出规定行数时显示点点点

CSS如何限制显示的文本字数

在火狐里 怎样用CSS限制字数并以点的形式显示

jquery字数限制超出显示...,原有内容在title中显示

div内文字显示两行,超出两行部分省略号显示css能实现么?