文本换行时更改文本对齐方式

时间:2018-03-25 21:21:44

标签: html css text alignment

目前,我有一个p标签,它的文本中心对齐。问题是当在这个p标签中显示具有正确放置的换行符的文本块时,它看起来是错误的。但是,当一个字符串太短时,它不会得到换行符,它需要保持中心对齐才能看起来很好。所以对我来说,解决方案是在文本开始换行时改变文本对齐的方式。关于如何做到这一点的任何提示?

1 个答案:

答案 0 :(得分:0)

您可以通过使用flexbox整合<p>的缩小版本来实现这一目标:

<!DOCTYPE html>
<style>
.container {
    display:flex;
    justify-content: center;
}
</style>
<div class="container">
    <p>short text</p>
</div>
<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>