How to insert a first line indent with css?

Asked

Viewed 28,807 times

10

I don’t know if the name is even indent, but how do I apply this space as in the image below in my paragraphs with css? Have some class in bootstrap? inserir a descrição da imagem aqui

html css bootstrap-3

2 answers

14


In pure CSS just use the text-indent:

.recuo { text-indent:4em }
<p class="text-info recuo">
  Suspendisse nec tincidunt nulla. Aliquam et urna magna.
  Suspendisse et tortor libero. Mauris risus tellus, auctor eu
  placerat at, auctor a lacus. Nunc porta urna vel luctus porta.
  Pellentesque vulputate tortor velit, non sodales sapien dictum at.
  Mauris cursus, neque vel egestas posuere, felis ligula mollis
  leo, id scelerisque neque dui sed elit. Maecenas in purus sed
  massa semper elementum. Nunc id bibendum dolor, imperdiet blandit
  urna. Vestibulum ultrices sem nisl, et tincidunt tortor imperdiet
  eget. Maecenas faucibus nisl nec mi aliquam pellentesque eget et ex.
  In ut turpis eget dui maximus volutpat id a arcu.
</p>

Although Bootstrap does not have a specific class for recoil, you can use a standard Bootstrap class and add one of your own within it class current, as in the example above.

In the example I put as a demonstration text-info, (that in our example does nothing), and then the recuo of its own CSS, to demonstrate the text-indent.

  • The indentation should not be 4 characters?

  • 1

    @Viniciusputtimorais the retreat can be as long as you want, just change the unit em the desired one. Always remember that in proportional sources, as the source of the author’s example, each character has a different width. And this varies from font to font as well. Paragraphs are usually expected to have a fixed indentation, even if you mix fonts and styles.

3

Use the property text-indent: 40px.

Browser other questions tagged html css bootstrap-3

You are not signed in. Login or sign up in order to post.