欢迎来到豆沙资源网,请记住本站地址:www.xsdy168.com 以备不时之需

html文本溢出显示省略字符的两种常用解决方法

搜点资源网 2020-3-26 综合资源 2

方法一:使用CSS溢出省略的方式解决

Css代码:


display: -webkit-box;
display: -moz-box;
white-space: pre-wrap;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;   /*显示行数*/


方法二:使用jQuery截取替换文本内容的方式解决

Js代码:

$(".text").each(function() {
    if ($(this).text().length > 20) {//要求字数大于20才进行字数替换
        $(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
        //从0到80开始替换,将剩余文本内容替换为"..."
    }
})


本文标签: 网页代码
  特别声明:文章多为网络转载,资源使用一般不提供帮助,特殊原创资源除外,如有侵权,不实,不妥请联系删除!

上一篇:JavaScript实现简单的文本逐字打印效果示例
下一篇:JQuery导航栏下划线随鼠标滑动实例代码

发表留言:

同类推荐

  • 一组非常简约好看的CSS3汉堡包菜单图标按钮变形动画特效,汉堡包菜单图标在手机端APP或响应式设计上比较常见,一般用来展开和关闭网站导航菜单......