添加破折号直到换行答案

【问题标题】：Add dashes until line break添加破折号直到换行
【发布时间】：2014-07-25 16:23:59
【问题描述】：

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

示例：

Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud-------------------------------------------------------- --------------

Lorem ipsum dolor sit amet, consectetur adipisicing elit -------------------------------------- ---------------------- Lorem ipsum ------------------------------------------------ -------------------------------------------------- ----------------- Lorem ipsum dolor sit amet, consectetur -------------------------------------------------------- --------------------------------------

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

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

span:after {
  display: inline-block;
  content: " -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ";
  width: 100%;
  overflow: hidden;
}

<html>

<body>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit
  <br> Lorem ipsum
  <br> Lorem ipsum dolor sit amet, consectetur
</body>

</html>

使用大型内容属性属性并在出现换行时隐藏额外的破折号。然而，它显示了整个内容而不隐藏额外的破折号。

【问题讨论】：

标签： html css tinymce line-breaks html2pdf

【解决方案1】：

CSS 很接近，但是您可以在此处执行的操作有一些限制。使每一行都包裹在 span 中是关键。看起来你缺少溢出：隐藏；在跨度上。应该在那里，而不是在 :after 伪选择器上。

另外，需要使用空白属性使跨度不换行。

这是一个小提琴，希望它能让你更接近：http://jsfiddle.net/adamfullen/6mG54/

span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

span:after {
  content: " -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ";
}

<span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    </span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
<br>
<span>Lorem ipsum</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur</span>

【讨论】：

【解决方案2】：

你可以试试这个：

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>');

Demo.

请注意，我们使用 2 个容器，外层 .container 和内层 .inner-container。这是因为.inner-container 用于剪辑内容，而外部容器用于渲染边框。否则边框（如果使用）将靠近点/虚线的末端，这确实很难看。

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

这里是 the ugly demo 支持 FireFox，它很难看，因为您无法在父级的某些图像背景上显示文本（末尾有虚线）。不过如果纯背景没问题的话，这个demo还是可以接受的（虽然比第一个demo复杂）。

【讨论】：