【问题标题】:Justify text not working after breaking line换行后对齐文本不起作用
【发布时间】:2021-10-16 15:23:28
【问题描述】:

我将align-text: justify; 属性应用于某些文本。问题是当我想将一个单词移到新行时,文本不合理。我该如何解决这个问题?

image

<div style="width: 400px; height: 200px;">
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit <br>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>

【问题讨论】:

    标签: html css text-alignment text-align text-justify


    【解决方案1】:

    您可以尝试将white-space: pre-line;text-align-last: justify; 添加到您的代码中。

    <div style="width: 400px; height: 200px;">
    <p style="text-align: justify; white-space: pre-line; text-align-last: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit <br>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>

    【讨论】:

    • 我不希望底部的文字有这么长的休息时间,还有其他建议吗?
    • 为什么会有人这样做?您无法控制最后一行中有多少单词,并且这些单词之间的空格将被调整为字面上不可读的数量。我认为让最后一行不强制对齐是更好的解决方案......
    • @virelox 就是这样......你的浏览器应该做什么?你告诉他,你希望最后一行是合理的,而他能做到这一点的唯一方法是在单词之间添加空格......
    • @Floyd 好吧,但我认为有一个 CSS 解决方案
    • 你还是没有做对。这是一个基本问题——CSS 对此无能为力。如果非要给最后一行留字,就没有办法让它好看。通过剪下两张纸(你的话)并对齐它们自己尝试一下......;)
    猜你喜欢
    • 2016-11-07
    • 1970-01-01
    • 2016-01-14
    • 2012-01-25
    • 2011-03-24
    • 2012-09-12
    • 2016-05-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多