用斜向缩进显示段落文本

Question

我想知道是否有一种方法可以显示带有对角缩进的段落文本，就像这样！请注意，这个文本是在所见即所得编辑器中编写的（包含html标签）。

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

有什么建议吗？

- Mohamed Amgad

---

您需要从右侧截取相同的字符串还是不同的字符串？ - xkeshav

Answer 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/

- Squirrl

Answer 2

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

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

更新

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

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

然后使用JavaScript的String.length属性

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

参考资料

• 通过jQuery去除标签
• strip_tag PHP函数
• str_word_count PHP函数

- xkeshav

---

谢谢您的回复，但我认为这会增加整个段落的文本缩进。我想要增加每一行的缩进。 - Mohamed Amgad

阅读此文章，以查找 jQuery 中的换行符。 - xkeshav

Answer 3

有一个非常简单的方法可以使用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 Still

---

哇，这是一个非常棒的解决方案。感谢 @Jeffrey。 - Mohamed Amgad

Answer 4

我不知道有没有直接的解决方案，因为随着你逐渐缩进文本的每一行，每行可以占用的空间长度将会减少，从而创建新的行。

例如：

TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT

缩进后：

TEXTTEXTTEXTTEXT
 TEXTTEXTTEXTTEX
T
  TEXTTEXTTEXTTE
XT
   TEXTTEXTTEXTT
EXT
    TEXTTEXTTEXT
TEXT

如果您正在处理由于换行而创建的行（1），并且一次检测到所有行并进行所有缩进（而不是更新<p>文本的算法）（2），则会出现此问题。如果字体系列是等宽字体，则可以进行调整。

最理想的情况是这些是以<br>标记结尾的行，这样就非常容易。

稍微困难一些的是使用等宽字体进行此操作。

最坏的情况是上面描述的，需要搜索第一行未缩进的行，然后对其进行缩进，更新<p>文本，然后重复该过程，直到完全遍历文本或缩进量超过<p>的宽度。

我建议您再次提出问题，并提供以下信息： - 行是否以<br>标记结尾，还是被换行？如果是换行，字体是等宽字体还是变宽字体？

- TimFoolery

---

感谢Michael的高度赞赏回复。对于你的问题，答案如下：（1）它是自动换行的（2）它是可变宽度的。 - Mohamed Amgad

Answer 5

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

- Mohamed Amgad

---

我知道这个答案已经十年了，但即使在那时，我们也更喜欢回答问题而不是指向其他地方的答案。 - Heretic Monkey