Question

我使用css的“text-indent”有问题，我想要的是，有3行或更多行的段落，其中我想对前两行和剩下的行应用“text-indent”样式将变为正常对齐。我尝试过使用CSS但是我无法获得预期的结果，所以任何人都可以帮助我。提前谢谢。

Answer 1

您可以使用float:left的伪元素来实现此目的

p:before
{
    content: '';
    display:inline-block;
    width: 20px;
    height: 30px; /* however much you need for 2 lines */
    float:left;
}

<强> FIDDLE

Answer 2

text-indent用于在每个段落之前应用空格。因此，如果你想为前两行留出空间，你可以将它们分成两段，或者将行封装在另一个元素（div / span）中，然后应用margin-left或padding-left，这取决于你是什么寻找。

Answer 3

<p class="indent">This is the first line.</br>
   This is the second Line
<p/>
<p>Those are other header or text or p or something else</p>

CSS

.indent {
   text-indent:50px;
}

Answer 4

这可能有所帮助：

<html>
<dl>
<dt><a href="http://www.thesitewizard.com/css/hanging-indents.shtml">Hanging Indents in CSS and HTML</a></dt>
<dd><p>This article describes how you can create hanging indents on your web pages using CSS and HTML.</p></dd>
<dd><p>This is second line of hanging index</p></dd>
<p>This is normal text line 3.</p>
</html>

for demo：http://www.compileonline.com/try_html5_online.php

如何在段落中应用“文本缩进”？

4 个答案: