如何通过简单地环绕来让每一行文本缩进不同的量？

Question

假设您有一段文本，可以使用 <?php echo $text_excerpt; ?> 将文本的第一行缩进很容易。

得到看起来像

的结果

　　　　Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut malesuada sem, in malesuada sapien. Vestibulum vitae posuere odio. Sed magna nisi, euismod sit amet euismod non, imperdiet vitae urna. Cras eu pulvinar neque. Suspendisse vestibulum fermentum quam, non consequat dolor auctor vel. Cras sed quam est.

你只需要写

<span style="text-indent: 50px;">
<?php echo $text_excerpt; ?>
</span>

或者另一种方法可以是

<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<?php echo $text_excerpt; ?>
</span>

但是，假设您希望获得如下所示的结果

　　　　　Lorem ipsum dolor sit amet, consectetur adipiscing elit.
　　　　Vestibulum ut malesuada sem, in malesuada sapien. Vestibulum
　　vitae posuere odio. Sed magna nisi, euismod sit amet euismod non,
imperdiet vitae urna. Cras eu pulvinar neque. Suspendisse vestibulum fermentum quam, non consequat dolor auctor vel. Cras sed quam est.

如何在不修改 $text_excerpt; 的内容的情况下执行此操作？本身？尝试将文本分成块将是一个糟糕的主意。或者不得不在加载后使用 Javascript 分解不同的文本行。或者必须在我的文本中间添加 <br>    标签。例如，对于数以千计的论坛评论，手动执行此操作是不可能的。调整寡妇的大小时也不会很好看，因为没有真正的文本换行。如何在包装的情况下做到这一点，而不是绝望地使用疯狂的 JS 函数？

Answer 1

这可以不用 JS 来完成，是的，只需要简单的 html/css。小的浮动 divs 来阻止所需的缩进就可以了。

<span class="text1" style="float:left; clear: left; width: 60px;">&nbsp;</span>
<span class="text1" style="float:left; clear: left; width: 40px;">&nbsp;</span>
<span class="text1" style="float:left; clear: left; width: 20px;">&nbsp;</span>

<span class="text1">
<?php echo $text_excerpt; ?>
</span>

<style>
.text1 { font-class: verdana; font-size: 10px; line-height: 10px; }
</style>

重要的一点是，这些 div 的高度应与主跨度元素中的文本完全相同。这就是为什么他们有相同的 'text1' 类.

另一个注意事项是，如果没有  ，div 的宽度将为 0 像素。他们需要一个占位符。

最后一点——为了让它在解释中看起来更容易理解，我将 div 的样式放在 div 中。最好在外面定义样式，将类赋值给每个div，比如.first_line_indent、.second_line_indent、.third_line_indent。这样，如果您以后想更改样式，就不必将新 CSS 复制并粘贴到数千个缩进 div 中。

Answer 2

根据您需要支持的浏览器，CSS 形状可能是适合您的解决方案：DEMO

-webkit-shape-outside: polygon(0 0, 0 50%, 100% 0);
-webkit-clip-path: polygon(0 0, 0 50%, 100% 0);

如何通过简单地环绕来让每一行文本缩进不同的量？

How can every line of text be indented a different amount, by simply wrapping around?

html

css

word-wrap