分词后,下一行向左对齐而不是居中
After word break, align next line to the left rather than center
我正在设计段落样式,并且在一定数量的字符后有换行符。我希望能够使中断后的行左对齐而不是居中。
.justify {
text-align: justify;
text-justify: inter-word;
}
.paragraph {
text-align: center;
max-width: 220px;
word-wrap: break-word;
word-break: break-all;
}
<div class='justify'>
<p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>
您可以使用text-align-last
The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.
.justify {
text-align: justify;
text-justify: inter-word;
}
.paragraph {
text-align: center;
max-width: 220px;
word-wrap: break-word;
word-break: break-all;
text-align-last: left;
border: 1px solid red;
}
<div class='justify'>
<p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>
.justify {
text-align: justify;
text-justify: inter-word;
}
.paragraph {
text-align: left;
max-width: 220px;
word-wrap: break-word;
word-break: break-all;
}
<div class='justify'>
<p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>
我正在设计段落样式,并且在一定数量的字符后有换行符。我希望能够使中断后的行左对齐而不是居中。
.justify {
text-align: justify;
text-justify: inter-word;
}
.paragraph {
text-align: center;
max-width: 220px;
word-wrap: break-word;
word-break: break-all;
}
<div class='justify'>
<p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>
您可以使用text-align-last
The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.
.justify {
text-align: justify;
text-justify: inter-word;
}
.paragraph {
text-align: center;
max-width: 220px;
word-wrap: break-word;
word-break: break-all;
text-align-last: left;
border: 1px solid red;
}
<div class='justify'>
<p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>
.justify {
text-align: justify;
text-justify: inter-word;
}
.paragraph {
text-align: left;
max-width: 220px;
word-wrap: break-word;
word-break: break-all;
}
<div class='justify'>
<p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>