我想知道是否有一种方法可以显示带有对角缩进的段落文本,就像这样!请注意,这个文本是在所见即所得编辑器中编写的(包含html标签)。
我在想是否有一种方法可以计算段落中不包括html标签的单词数,然后通过jQuery或Javascript制定一些方程式来增加每行文本的缩进。
有什么建议吗?
我在想是否有一种方法可以计算段落中不包括html标签的单词数,然后通过jQuery或Javascript制定一些方程式来增加每行文本的缩进。
有什么建议吗?
您可以倾斜包含的 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);
}
要计算段落中单词的数量(不包括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');
参考资料
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>
我不知道有没有直接的解决方案,因为随着你逐渐缩进文本的每一行,每行可以占用的空间长度将会减少,从而创建新的行。
例如:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
缩进后:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEX
T
TEXTTEXTTEXTTE
XT
TEXTTEXTTEXTT
EXT
TEXTTEXTTEXT
TEXT
如果您正在处理由于换行而创建的行(1),并且一次检测到所有行并进行所有缩进(而不是更新<p>
文本的算法)(2),则会出现此问题。如果字体系列是等宽字体,则可以进行调整。
最理想的情况是这些是以<br>
标记结尾的行,这样就非常容易。
稍微困难一些的是使用等宽字体进行此操作。
最坏的情况是上面描述的,需要搜索第一行未缩进的行,然后对其进行缩进,更新<p>
文本,然后重复该过程,直到完全遍历文本或缩进量超过<p>
的宽度。
我建议您再次提出问题,并提供以下信息:
- 行是否以<br>
标记结尾,还是被换行?如果是换行,字体是等宽字体还是变宽字体?
经过长时间的搜索,我找到了一些有用的东西http://www.csstextwrap.com/examples.php。我认为经过一些修改,它将符合我的要求。感谢您高度赞赏的回复。