Как применить "текст-отступ" в абзаце?

У меня проблема с "text-indent" с помощью css. То, что я хочу, иметь абзац с 3 или более строками, с тем, что я хочу применить стиль "text-indent" для первых двух строк, а остальные строки станут нормальное выравнивание. Я пытался использовать CSS, но я не смог получить ожидаемый результат, поэтому кто-нибудь может мне помочь в этом. Заранее спасибо.

Источник

4 ответа

Решение

Вы можете использовать псевдоэлемент с float:left для достижения этой цели

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

FIDDLE

Источник

Это может помочь:

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

для демонстрации: http://www.compileonline.com/try_html5_online.php

Источник 
<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;
}
Источник

Text-Indent используется для применения пробела перед каждым абзацем. Поэтому, если вы хотите иметь место для первых двух строк, вы можете разделить их на два абзаца или инкапсулировать строки в другом элементе (div/span) и применить margin-left или padding-left, в зависимости от того, что вы находясь в поиске.

Источник
Другие вопросы по тегам