使用对角线缩进显示段落的文本

Question

我想知道是否有一种方法来显示带有对角缩进的段落文本,就像这样的东西!

请记住,此文本是用WYSIWYG编辑器(包含html标签)编写的.

我在想是否有办法计算段落中除了html标签之外的单词,然后制作一些方程式来增加jQuery或Javascript每行的文本缩进.

有什么建议吗？

Answer 1

使用 CSS 有一种非常简单的方法可以做到这一点。创建一个列表。然后使用 li::before 将左侧填充添加到列表项。将 li::before 元素设置为向左浮动的又高又薄的块。每个列表项都会为其父列表项及其下方的所有列表项创建左侧填充。

像这样：

li::before {
    content: "";
    display: block;
    float: left;
    height: 50px;
    width: 10px;
}

<ul>
  <li>sancti et dilecti</li> 
  <li>viscera misericordiae</li>
  <li>benignitatem </li>
  <li>humilitatem</li>
  <li>modestiam</li>
  <li>patientiam</li>
  <li>caritatem</li>
</ul>