html文本溢出显示省略字符的两种常用解决方法
2018-10-12 13:42
676 查看
方法一:使用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开始替换,将剩余文本内容替换为"..." } })
上述两种方法作用在文本内容的类名即可。
总结
以上所述是小编给大家介绍的html文本溢出显示省略字符的两种常用解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章推荐
- 当对象内文本溢出时显示省略标记 使文字换了行,解决了把div表格撑的很大的问题
- ASP.NET中文显示之两种解决方法
- “无法显示 XML 页 - 名称以无效字符开头。”&&“ XML解析错误:未组织好”的解决方法
- ASP.NET中文显示之两种解决方法
- ASP.NET中文显示之两种解决方法
- masterpage 无法用html代码显示flash的解决方法
- CSS溢出文本显示省略号的详细方法[CSS小知識]
- 单行溢出文本显示省略号的方法(兼容IE FF)
- ASP.NET 中文显示之两种解决方法
- 后台生成HTML时显示中文件方法。解决IE8显示界面的兼容
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
- HTML Help Workshop制作帮助文件,图片显示不了的解决方法
- ubuntu下打开文本显示乱码解决方法(转)
- FLASH中动态文本遮罩无法显示的解决方法.
- html 文本框屏蔽非法字符,解决js的replace函数使光标跳到文本最后的问题
- HTML样式长文本行断行解决方法display:inline-block
- 关于新闻图片轮转在html中显示正常,而通过aspx中不显示的解决方法!
- ASP.NET中文显示之两种解决方法
- 字符文本中字符太多 解决方法
- XP中HTM/HTML文件图标无法正常显示的解决方法