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

我想知道是否有一种方法可以显示带有对角线缩进的段落文本，就像这样！

在此处输入图像描述

请记住，此文本是用WYSIWYG编辑器（包含html标签）编写的。

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

有什么建议吗？

使用CSS有一种非常简单的方法。创建一个列表。然后使用li :: before将左侧填充添加到列表项。将li :: before元素设置为一个向左浮动的高大的瘦块。每个人都会为其父列表项及其下面的所有项创建左侧边距。

像这样：

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

  sancti et dilecti
 viscera misericordiae
 benignitatem 
 humilitatem
 modestiam
 patientiam
 caritatem

经过多次搜索后，我发现了一些有用的东西http://www.csstextwrap.com/examples.php我认为经过一些修改后它符合我的要求。感谢您的高度赞赏回复。

要计算段落中除HTML标记之外的单词数，请使用：

 $tagless_content=strip_tags($content); str_word_count($tagless_content);

这是通过jQuery增加text-indent的代码

 jQuery.fn.stripTags = function() { return this.replaceWith( this.html().replace(/<\/?[^>]+>/gi, '') ); };

然后使用String.length JavaScript属性

 var len = $('').stripTags().length(); for(var i=0;i
').css('text-indent',+i+'px');

参考

你可以扭曲包含div

 .holder{ transform:skew(-40deg); }  Just  Like This!

然后忽略它里面的每个单词。

 .rotate { transform: skew(40deg); }

我所知道的并没有直接的解决方案，因为当你越来越多地缩进文本的每一行时，每行所占用的空间长度将减少，从而创建新行。

例如：

 TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXT

后缩进：

 TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEX T TEXTTEXTTEXTTE XT TEXTTEXTTEXTT EXT TEXTTEXTTEXT TEXT

如果（1）您正在处理由于自动换行而创建的行，以及（2）如果您一次检测到所有行然后执行所有缩进（而不是更新

的算法），则会出现此问题如果字体系列是单倍间距字体，则可以调整。

最好的情况是这些是终止行，在这种情况下，这将是非常容易的。

使用单倍间距字体会更难做到这一点。

最糟糕的情况，如上所述，需要搜索没有缩进的第一行，然后缩进它，更新

的文本，然后重复该过程，直到文本完全通过或者数量为压痕超过

宽度。

我建议再次提出你的问题，提供以下信息： – 这些行是用标签终止的，还是用字包装的？如果是自动换行，字体是单倍间距还是可变宽度？