以下是一个需要额外包装的黑客 idea :
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*/
.e p: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>
一个交互式演示,您可以在其中调整大小,以看到发挥的魔力:
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*/
.e p: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>