缩进多行 <p> HTML 标记



是否有办法从单个HTML<p>元素缩进多行文本?

例如,假设我想缩进前2或3行,而不是仅仅一行?有CSS属性吗?

这可以通过在p的开始添加一个伪元素来实现,该伪元素正好是两(或三,或您需要的多少)行的高度,并且具有设置的宽度,并应用float: leftp文本将围绕这个伪元素换行,使其看起来像多行缩进。

例如,如果我知道我的p行每一行的高度是1.2em,我可以通过添加一个伪元素2.4em高和30px宽来缩进前两行30px:

p {
font-size: 1em;
line-height: 1.2;
}
p::before {
content: '';
float: left;
height: 2.4em;
width: 30px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet luctus turpis. Curabitur id varius tortor. Proin consequat quam eros, id sodales quam auctor vitae. Maecenas porttitor, eros mattis tincidunt porta, est eros iaculis ante, ac sodales dolor massa eget nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet luctus turpis. Curabitur id varius tortor. Proin consequat quam eros, id sodales quam auctor vitae. Maecenas porttitor, eros mattis tincidunt porta, est eros iaculis ante, ac sodales dolor massa eget nunc.</p>

相关内容

  • 没有找到相关文章

最新更新