Question

可以设置文本样式，以便添加短划线直到发生换行。

示例：

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 ------------------------------------------- -------------------------------------

我有一个非常简单的标记，如下所示

<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>

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

我尝试将每个paragrah包装在span / p标签内，然后使用伪类：after 之后：

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

使用大内容属性属性并在发生换行时隐藏额外的破折号。然而，它显示了整个内容而没有隐藏额外的破折号。

Answer 1

CSS很接近，但是你可以在这里做些什么。将每条线包裹在跨度中是关键。看起来你错过了溢出：隐藏;在跨度上。应该在那里，而不是在psuedo选择器之后。

此外，还需要使用white-space属性使span不能换行。

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

CSS

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

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

HTML

<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>

Answer 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元素中并将所有内容包装在手动或使用脚本。这是一个脚本，用于选择某个元素（正文）的所有内容并为您包装文本：

$(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，它很难看，因为你无法在父级的某些图像背景上显示文本（末尾带有虚线）。但是如果背景稳定，那么这个演示是可以接受的（虽然它比第一个演示更复杂）。

添加破折号直到换行

2 个答案:

Demo.