Html 向动态换行符添加内容

我正试图模拟JSDoc的可视化设计来处理一些文本内容。我想在每一行加上“*”

下面，我将每一行添加到自己的段落中，从而将每一行分开

HTML结构：

Lorem ipsum dolor sit amet，


阿迪皮斯精英。


圣瓦卢帕特姆贵宾酒店


用福吉特的暂时的光阑。奥迪奥


debitis，numquam doloremque


拉博洛桑，康莫迪福吉特


真实责任


奈斯西翁，费舍尔贵人。

风格：

.container{
字号：18px；
字体系列：“Lucida控制台”，摩纳哥，monospace；
}
.货柜：在{
内容：'/**'；
空白：预处理；
}
.货柜：之后{
内容：“*/”；
空白：预处理；
}
.文本：之前{
内容：“*”；
空白：预处理；
}

但我想知道，是否可以在动态换行符/换行符上实现这一点，该换行符/换行符与父级宽度相适应，如以下示例所示：

Lorem ipsum dolor sit amet，Concertetur Adipising
精英。用福吉特开胃酒盛装威严
暂时的。Odio debitis，numquam doloremque laboriosam，
真正的责任，
费舍尔阁下。

有关更多说明，请参见编辑

我更新并使用了

em

单位来代替伪字符的缩进/填充和定位，并根据设置的字体大小自动调整。由于pseudo继承其父字体大小，因此它也匹配每一行文本

---

除非使用脚本，否则不能在换行时动态注入这样的字符。即使有，重新计算何时何地插入恒星也不是那么容易

一个简单的技巧（仅使用CSS）是将伪元素定位为绝对，有足够的星星覆盖文本，隐藏溢出，然后使用填充将文本缩进

注意，我将pseudo改为CSS3语法，它在pseudo元素前面加了2个冒号，因此除非您需要支持IE8，否则请使用更新的语法

堆栈片段

.container{
宽度：390px；
字体大小：48px；
字体系列：“Lucida控制台”，摩纳哥，monospace；
背景色：#E0；
}
.容器：：之前{
内容：'/**'；
空白：预处理；
}
.容器：：之后{
内容：“*/”；
空白：预处理；
}
.文本{
位置：相对位置；
溢出：隐藏；/*隐藏溢出的星星*/
左侧填充：1.5em；/*缩进文本*/
边距：0；/*删除p的默认上/下边距*/
}
.text:：在{/*之前注意：“\A”在“内容”中创建换行符*/
内容：'*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\；
空白：预处理；
位置：绝对位置；
排名：0；
左：.6em；
身高：100%；
}

Lorem ipsum dolor sit amet，Concertetur Adipising
精英。用福吉特开胃酒盛装威严
暂时的。Odio debitis，numquam doloremque laboriosam，
真正的责任，
费舍尔阁下。

<>代码> 如果你想要一个更动态的方式，其中的行数是未知的，你可以考虑<代码> */Cord>作为你重复的背景图像。然后，您可以有任意数量的行，也可以根据需要更改字体大小

下面是一个我将使用此图标的示例：（稍后您可以轻松地使用另一个图标进行更改）


.container{
宽度：390px；
字号：18px；
字体系列：“Lucida控制台”，摩纳哥，monospace；
背景色：#E0；
保证金：5px；
}
.容器：：之前{
内容：“/*”；
显示：块；
字体大小：粗体；
}
.容器：：之后{
内容：“*/”；
显示：块；
左边距：12px；
字体大小：粗体；
}
.文本{
位置：相对位置；
左侧填充：30px；
保证金：0；
线高：1.2米；
背景：url（'data:image/svg+xml'，）12px-2px/0.5em1.16emrepeat-y；
}


Lorem ipsum dolor sit amet，Concertetur Adipising
精英。用福吉特开胃酒盛装威严
暂时的。Odio debitis，numquam doloremque laboriosam，
真正的责任，
费舍尔阁下。


Lorem ipsum dolor sit amet，Concertetur Adipising
精英。用福吉特开胃酒盛装威严


Lorem ipsum dolor sit amet，Concertetur Adipising
精英。用福吉特开胃酒盛装威严


Lorem ipsum dolor sit amet，Concertetur Adipising
精英。用福吉特开胃酒盛装威严

通过为将创建换行的绝对值元素指定固定宽度，可以避免设置所有换行符
\A
alone@TemaniAfif是的，谢谢，添加了一个示例，最终结果相同：）。。。我用
em
单位进行了更新，以保持缩进/填充和伪位置与设置字体大小相关。如果仔细观察，您会发现星星与线条不匹配。例如，在上一个示例中，将字体大小更改为48px，您将看到每一行的字体都向上移动，而我的字体不会像伪字体那样拾取其父字体，因此无论字体如何，都会始终工作。因此，您的字体是否“更具动态性”值得商榷。。。除非您可以使背景图像（svg）继承容器的字体大小。@LGSon更具动态性的方法不是我所做的示例，而是使用您重复的背景，这将使其更易于处理。。。我只是简单地选择了我在网上找到的第一个，并对不同的值进行了近似，然后将它用于OP（万一他想使用这个）以完美地表示