web-dev-qa-db-fra.com

Quel est le meilleur moyen d'indenter du texte dans une DIV quand celle-ci se termine?

J'ai donc une DIV qui contient du texte dynamique. Disons que je connais le texte et la taille de la police mais que je ne connais pas la taille de la DIV. Je voudrais que l'affichage du texte dans la DIV soit suffisamment intelligent pour montrer l'indentation lorsque le texte est renvoyé à la ligne.

Dites que mon texte original ressemble à quelque chose comme ça:

 Lorem ipsum dolor sit amet, 
 Consectetur adipisicing 
 Elit, sed do eiusmod 
. Incididunt temporel

Au lieu de cela, je veux qu'il ressemble à ceci:

 Lorem ipsum dolor sit amet, 
 Consectetur adipisicing 
 Elit, sed do eiusmod 
. Incididunt temporel

Quelle est la meilleure façon de faire cela si je ne connais pas la taille de la DIV a priori? Et quelle est la meilleure façon de le faire si je connais la taille?

Merci!

csshtmlwrapping
27
fetucine53

Si je comprends ce que vous demandez, cela fonctionne pour moi: 

div {
    padding-left: 2em;
    text-indent: -2em;
}
45
Allain Lalonde

Pas sûr du support multi-navigateur, mais vous pouvez utiliser le pseudo-élément de première ligne :

p {padding:10px;}
p:first-line {padding-left:0px;}

<p>Hello World, I'm Jonathan Sampson</p>

Serait affiché comme

Bonjour tout le monde je suis
Jonathan
Sampson

Sinon, vous pouvez donner à l'élément un remplissage à gauche, puis un retrait de texte négatif.

6
Sampson

Le W3C indique que vous devez simplement utiliser la propriété text-indent.

la source

.indentedtext
{
    text-align:start;
    text-indent:5em;
}
6
lucian.jp

Cela devrait fonctionner aussi bien pour les DIV de taille variable que fixe.

<div style="width: 150px; text-indent: -2em; padding-left: 2em;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt.
</div>
1
Noldorin

Utilisez la propriété CSS text-indent:

.box {
  border: 1px solid #ddd;
  background: #fff;
  max-width: 300px;
  padding: 15px 15px 15px 45px;
}  

.box p {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  text-align: justify;
  font-size: 12px;
  text-indent: -30px;
} 
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus natus minima ex possimus? Pariatur odit distinctio, similique, adipisci nesciunt molestias iusto ipsa repellendus recusandae unde, enim veniam voluptatem expedita.</p>
</div>

0
Razvan Zamfir