javascript 实现文本使用省略号替代(超出固定高度的情况)

前端之家收集整理的这篇文章主要介绍了javascript 实现文本使用省略号替代(超出固定高度的情况)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

javascript 实现文本使用省略号替代

实现效果图:

如果图片不清晰,建议放大浏览器的尺寸进行查看

1.这里是配合jQuery来进行替换的,所以jquery还是必备的,毕竟是轻量级,而且对各大的浏览器兼容性也好。所以开始页面引入jquery文件

2.在页面添加样式。

3.我这里测试使用的文本内容如下,读者可以自行设置。

www.nowcoder.com
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
  <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
</p>

<div class="text">

www.nowcoder.com
牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站 牛客网良心网 程序员刷题必备网站

4.在页面的末尾部分加入如下js代码,在页面加载完毕后,进行换行操作。

divH) { $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/,"...")); } }); }

需要注意的是上面的js代码使用的文本里面设置的class名称.

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

原文链接:https://www.f2er.com/js/41437.html

猜你在找的JavaScript相关文章