Hil*_*ijl 6 html css text-align
我想显示一个像这样的短文本对齐中心句子。
<p style="font-size: 13px; text-align: center; width: 600px;">
This is a variable-length sentence which is sometimes only a few words and sometimes up to three lines long.
</p>
Run Code Online (Sandbox Code Playgroud)
这是一个可变长度的句子,有时只有几个单词,有时长达三行。
现在发生的情况是,由于宽度的原因,最后两个单词“lines long”落在段落的下一行。在居中对齐中,这看起来相当难看。我当前解决此问题的方法是在正确的位置手动插入中断。
<p style="font-size: 13px; text-align: center; width: 600px;">
This is a variable-length sentence which is sometimes<br/>only a few words and sometimes up to three lines long.
</p>
Run Code Online (Sandbox Code Playgroud)
这是一个可变长度的句子,有时
只有几个单词,有时长达三行。
一直这样做会变得很累。HTML 有没有办法自动执行此操作?那么基本上首先让“p”元素确定显示文本所需的最小行数,然后在保持相同行数的情况下尽可能水平缩小它?
使用 CSS 可以获得的最接近的是text-align: justify;
p {
font-size: 13px;
text-align: justify;
}
p#first {
width: 100px;
}
p#second {
width: 150px;
}Run Code Online (Sandbox Code Playgroud)
<p id="first">
This is a variable-length sentence which is sometimes only a few words and sometimes up to three lines long.
</p>
<p id="second">
This is a variable-length sentence which is sometimes only a few words and sometimes up to three lines long.
</p>Run Code Online (Sandbox Code Playgroud)