以对角线缩进显示段落文本答案

【问题标题】：Display Paragraph's text with Diagonal Indent以对角线缩进显示段落文本
【发布时间】：2011-07-12 13:27:15
【问题描述】：

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

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

我在想是否有办法计算段落中不包括 html 标记的单词，然后通过 jQuery 或 Javascript 制作一些方程式来增加每行文本的缩进。

有什么建议吗？

【问题讨论】：

你需要从右边截断相同的字符串还是不同的字符串？？

标签： php javascript jquery css

【解决方案1】：

你可以倾斜包含的 div

.holder{
  transform:skew(-40deg);
}

<div class="holder">
    <span class="rotate">Just </span>
    <span class="rotate">Like</span>
    <span class="rotate">This! </span>
</div>

然后将其中的每个单词取消倾斜。

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

https://jsfiddle.net/dcst94sv/5/

【讨论】：

【解决方案2】：

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

【讨论】：

哇，这是一个绝妙的解决方案。谢谢@Jeffrey

【解决方案3】：

要计算段落中不包括 HTML 标记的单词的数量，请使用：

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

更新

这是通过 jQuery 增加文本缩进的代码

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

然后使用String.length JavaScript 属性

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

参考

【讨论】：

感谢您的回复，但我认为这会增加整个段落的文本缩进。我想增加每一行的缩进。
阅读此article 以在 jQuery 中查找换行符

【解决方案4】：

据我所知，没有直接的解决方案，因为随着文本的每一行缩进越来越多，每行可以占用的空间长度会减少，从而创建新的行。

例如：

TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT

后缩进：

TEXTTEXTTEXTTEXT
 TEXTTEXTTEXTTEX
T
  TEXTTEXTTEXTTE
XT
   TEXTTEXTTEXTT
EXT
    TEXTTEXTTEXT
TEXT

如果 (1) 您正在处理由于自动换行而创建的行，并且 (2) 如果您一次检测所有行然后执行所有缩进（而不是更新的文字。如果字体系列是等宽字体，则可以调整。

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

使用等距字体会稍微困难一些。

如上所述，最坏的情况需要搜索未缩进的第一行，然后缩进它，更新 的文本，然后重复该过程直到文本完全通过或者如果缩进量超过 的宽度。

我建议再次询问您的问题，并提供以下信息： - 这些行是否以  标记结束，或者它们是自动换行的？如果是自动换行，字体是等宽还是变宽？

【讨论】：

感谢迈克尔非常感谢您的回复。您的问题的答案：（1）它的自动换行（2）它的可变宽度。

【解决方案5】：

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

【讨论】：

我知道这个答案已有十年之久，但即便如此，我们还是更喜欢回答问题的答案，而不是指向其他地方的答案。