How to apply the "text-indent" in paragraph?

StackOverflow https://stackoverflow.com/questions/22931742

سؤال

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. I have tried using CSS but i couldn't get the expected result, so can anyone help me in this. Thanks in advance.

هل كانت مفيدة؟

المحلول

You could use a pseudo element with float:left to achieve this

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

FIDDLE

نصائح أخرى

text-indent is used to apply space before each paragraph. 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.

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

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top