Question

我想知道是否有办法显示带有对角线缩进的段落文字，就像那样！

enter image description here

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

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

有什么建议吗？

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/

Answer 2

要计算不包含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 = $('<p>').stripTags().length(); 
for(var i=0;i<len;i++)
    jQuery('<p>').css('text-indent',+i+'px');

参考

Answer 3

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

Answer 4

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

Answer 5

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

例如：

TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT

后缩进：

TEXTTEXTTEXTTEXT
 TEXTTEXTTEXTTEX
T
  TEXTTEXTTEXTTE
XT
   TEXTTEXTTEXTT
EXT
    TEXTTEXTTEXT
TEXT

如果（1）您正在处理由于自动换行而创建的行，并且（2）如果您一次检测到所有行然后执行所有缩进（而不是更新的算法），则会出现此问题的文字。如果字体系列是单倍间距字体，那么可以调整它。

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

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

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

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

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

5 个答案:

更新