Html 添加破折号直到换行

可以设置文本样式，以便在出现换行符之前添加破折号

示例：

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个小小的节日--------------------------------------------------------

Lorem ipsum dolor sit amet，奉献精英-------------------------------------------------------------- 同侧眼睑------------------------------------------------------------------------------------------------------------------- 洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图--------------------------------------------------------------------------------

作为输入（tinymce生成的模板），但也可以根据需要引入任何额外的标记。我们的想法是使用html2pdf以这种格式从这个html生成一个pdf文件，所以我想知道是否有一个使用html/css/js、tinymce的插件或者通过某种方式配置html2pdf类的解决方案

我曾尝试将每个段落包装在span/p标记中，然后使用伪类：after

span:after{
显示：内联块；
内容：“---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------”；
宽度：100%；
溢出：隐藏；
}

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个小小的节日


Lorem ipsum dolor sit amet，奉献精英

同侧眼睑

洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图

CSS很接近，但您在这里所能做的有局限性。使每一条线都包裹在跨度中是关键。看起来您缺少溢出：隐藏；在跨度上。应该在那里，而不是在：after psuedo选择器上

此外，还需要使用空白属性使跨度不包裹

这是一把小提琴，希望它能让你更靠近：

span{
显示：块；
溢出：隐藏；
空白：nowrap；
}
跨度：之后{
内容：“---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------”；
}

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个小小的节日


Lorem ipsum dolor sit amet，奉献精英


乱数假文


Lorem ipsum dolor sit amet，Concertetur

您可以尝试以下方法：

body {
  background:url(http://placekitten.com/800/600);
}
div.container {
  border:1px solid white;
  padding:10px;
  width:700px;
  margin:0 auto;
}
div.inner-container {
  overflow:hidden;          
  position:relative;
  width:100%;
}
div.inner-container span {
  color:white;
  position:relative;     
  font-size:20px;
}
div.inner-container span:after {
  content:'';    
  position:absolute;
  width:300vw; /* as large as possible */
  border-bottom:0.05em dotted white;
  left:100%;
  bottom:0.25em;
  z-index:-1;
}

当然，您必须将文本包装到

span

元素中，并手动或使用脚本将所有内容包装到一些容器div中。下面是为您选择某个元素（主体）的所有内容并换行文本的脚本：

$(document.body).contents().wrapAll("<div class='container'>")
                .closest('div.container')
                .wrapInner("<div class='inner-container'>")
                .end().filter(function(i,e){ return e.nodeType == 3}).wrap('<span>');

$（document.body.contents（）.wrapAll（“”）
.closest（'div.container'）
.wrapInner（“”）
.end（）.filter（函数（i，e）{returne e.nodeType==3}）.wrap（“”）；

请注意，我们使用了两个容器，外部

.container

和内部

.internal container

。这是因为

.internal container

用于剪裁内容，而outer container用于渲染边框。否则，边框（如果使用）将接近虚线/虚线的端点，这确实很难看

编辑：我已经测试了演示，除了所谓的FireFox，所有浏览器都运行良好，同样FireFox有自己的行为方式，不关心标准。。。我不认为这里有什么解决办法，除非使用其他方法。仍然有一些方法，但是请注意，这里的演示在图像背景上呈现所有虚线，还有一些其他的解决方案，但它不能以这种方式工作（我的意思是文本背景将显示得很难看）

这里是支持FireFox的，它很难看，因为你不能在父对象的某个图像背景上显示文本（末尾有虚线）。但是，如果坚实的背景是好的，这个演示是可以接受的（尽管它比第一个演示更复杂）