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

Question

I have a problem with "text-indent" using css, What i want is, have paragraph with 3 or more lines, with in that i want to apply the "text-indent" style for first two lines and remaining lines will become to normal alignment. 我对使用CSS的“ text-indent”有疑问，我想要的是具有3行或更多行的段落，因为我想对前两行应用“ text-indent”样式，其余行将变为正常对齐。 I have tried using CSS but i couldn't get the expected result, so can anyone help me in this. 我曾尝试使用CSS，但无法获得预期的结果，因此任何人都可以在这方面帮助我。 Thanks in advance. 提前致谢。

Answer 1

You could use a pseudo element with float:left to achieve this 您可以使用带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 is used to apply space before each paragraph. text-indent用于在每个段落之前加上空格。 So if you want to have space for the first two lines, you could either split them in two paragraphs or to encapsulate the lines in another element (div/span) and apply margin-left or padding-left, depending on what you're looking for. 因此，如果您想为前两行留出空间，则可以将它们分成两段，也可以将行封装在另一个元素中（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 CSS

.indent {
   text-indent:50px;
}

Answer 4

This may help: 这可能会有所帮助：

<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 演示： http : //www.compileonline.com/try_html5_online.php

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

问题描述

4 个解决方案

解决方案1
1 已采纳 2014-04-08 08:44:00

解决方案2
0 2014-04-08 08:43:35

解决方案3
0 2014-04-08 08:45:53

解决方案4
0 2014-04-08 08:55:01

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

问题描述

4 个解决方案

解决方案1 1 已采纳 2014-04-08 08:44:00

解决方案2 0 2014-04-08 08:43:35

解决方案3 0 2014-04-08 08:45:53

解决方案4 0 2014-04-08 08:55:01

解决方案1
1 已采纳 2014-04-08 08:44:00

解决方案2
0 2014-04-08 08:43:35

解决方案3
0 2014-04-08 08:45:53

解决方案4
0 2014-04-08 08:55:01