Me gustaría sangrar la primera línea de los párrafos (exactamente lo que hace la propiedad CSS text-indent ), pero solo para aquellos párrafos que ocupan varias líneas. Si un párrafo cabe en una sola línea, no quiero que tenga sangría.
¿Es posible lograr un resultado similar?
p { text-indent: 20px; max-width: 350px; } <p>This is a pretty long paragraph which spans over a few lines. For that reason I wish its first line to be indented (as it should be).</p> <p>These are short paragraphs.</p> <p>I don't want them indented.</p> <p>Unless they take multiple lines.</p>Aquí hay una idea hacky que requiere un envoltorio adicional:
p { max-width: 350px; line-height:1.2em; /* height of one line */ } .e { display:flex; /* a flex container to be able to use 100% in the height*/ } /* a pseudo element to create the indentation*/ .ep:before { content:""; float:left; width:20px; /* 0px if 100% (height of p) is less or equal to 1.2em (one line) 1px if 100% is bigger than one line */ height:clamp(0px,100% - 1.2em,1px) } <div class="e"><p>This is a pretty long paragraph which spans over a few lines. For that reason I wish its first line to be indented (as it should be).</p></div> <div class="e"><p>These are short paragraphs.</p></div> <div class="e"><p>I don't want them indented.</p></div> <div class="e"><p>Unless they take multiple lines.</p></div>Una demostración interactiva donde puedes cambiar el tamaño para ver la magia en juego:
p { line-height:1.2em; /* height of one line */ } .e { display:flex; /* a flex container to be able to use 100% in the height*/ overflow:hidden; border:1px solid; resize:horizontal; width: 350px; } /* a pseudo element to create the indentation*/ .ep:before { content:""; float:left; width:20px; /* 0px if 100% (height of p) is less or equal to 1.2em (one line) 1px if 100% is bigger than one line */ height:clamp(0px,100% - 1.2em,1px) } <div class="e"><p>This is a pretty long paragraph which spans over a few lines. For that reason I wish its first line to be indented (as it should be).</p></div>