gpt4 book ai didi

html - 添加破折号直到换行

转载 作者:行者123 更新时间:2023-11-28 01:43:53 26 4
gpt4 key购买 nike

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

示例:

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>

如果出现换行,则使用大内容属性并隐藏额外的破折号。然而,它显示了全部内容而没有隐藏额外的破折号。

最佳答案

CSS 很接近,但是您在这里可以做的事情有一些限制。让每一行都包裹在 span 中是关键。看起来你缺少 overflow: hidden;在跨度上。应该在那里,而不是在 :after 伪选择器上。

此外,还需要使用空白属性使 span 不换行。

这是一个 fiddle ,希望它能让你更接近: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>

关于html - 添加破折号直到换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24047261/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com