用jQuery从左到右在段落中的每行文本下面划线

我想用jQuery从左到右在段落中的每一行文本下面画线，点击按钮，文本将被动态输入。段落中的文本中没有新行（\n）

我是如何接近它的，直到现在还如下

我使用正则表达式按字符数分隔文本行，不打断任何单词，并使用类“highlight”将其包装为span，然后在“span.highlight”中插入高度为12 px、宽度为0px的新空白span。当我点击按钮时，我将宽度设置为0到100%，它看起来像是从左到右的下划线

这种方法的问题在于它没有响应性。当窗口宽度减小时，这些单词会换行，在动画中，这些单词不会加下划线

请提出解决方案

这是我的密码

$.fn.highlight = function(str) {
  var regex = new RegExp(str, "gi");
  return this.each(function() {
    $(this).contents().filter(function() {
      return this.nodeType == 3 && regex.test(this.nodeValue);
    }).replaceWith(function() {
      return (this.nodeValue || "").replace(regex, function(match) {
        return "<span class='highlight'>" + match + "</span>";
      });
    });
  });
};
var text = '';
text = $('p').text();
var RExpress = /\S[\s\S]{0,105}\S(?=\s|$)/gi;
var splittedText;
var result = new Array();
while ((splittedText = RExpress.exec(text)) !== null) {
  $("p").highlight(splittedText[0]);
}

$.fn.highlight=函数（str）{
var regex=新的RegExp（str，“gi”）；
返回此值。每个（函数（）{
$（this.contents（）.filter（function（））{
返回this.nodeType==3&®ex.test（this.nodeValue）；
}).replaceWith（函数（）{
return（this.nodeValue | | |“”）.replace（regex，function（match）{
返回“+匹配+”；
});
});
});
};
var text=''；
text=$（'p'）.text（）；
var RExpress=/\S[\S\S]{0105}\S（？=\S}$）/gi；
var分割文本；
var result=新数组（）；
while（（splittedText=RExpress.exec（text））！==null）{
$（“p”）。高亮显示（拆分文本[0]）；
}

---

提前谢谢。

然后给我们看看你的代码。请看上面的代码。幸运的话？