如何在两端对齐的文本中创建手动换行？

Question

我有一个大约5页长度的Word文档，里面有一个故事。任务是在网站上实现这个故事。

#reading {
  hyphens: auto;
  text-align: justify
}

<div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading">
  TextTextText<br> TextTextText
  <br> TextTextText
</div>

文字要求：

• 应与Word文档中的换行符完全相同
• 使所有行两端对齐
• 由于运行在文本上的脚本，不能使用元素

问题：

• 换行和文本两端对齐不能同时使用。

我尝试将

宽度放置在与Word文档相同的级别上。前20行的换行符都正确，但此后会略微移动。

问题：

有没有一种方法可以创建手动换行符并仍保持text-align: justify？

- InPanic

---

你需要使用text-align-last。例如，参见如何使div的最后一行两端对齐？。 - Mr Lister

问题不在于最后一行，如果我理解你的意思正确的话。而是每一行都有一个换行符，这会使文本重新对齐：左对齐。因此，调整将被完全忽略。 - InPanic

这就是为什么你需要text-align-last！每一行以<br>结尾的都是在<br>之前的最后一行。请参考链接的问题，或者只需通过将text-align-last: justify;添加到您的CSS中进行测试。 - Mr Lister

或者，看看这个fiddle：https://jsfiddle.net/MrLister/eouhdsxa/2/ - Mr Lister

谢谢，现在我明白你的意思了。明天我会试一试。 - InPanic

Answer 1

您可以使用CSS属性text-align-last: justify

请注意：如果最后一行只有几个单词，结果可能会令人失望: 左侧一个单词，右侧一个单词，之间有很大的空格。

align-text-last: center 可以得到更美观的结果。

Text-align-last属性模拟器

- AlainPre

Answer 2

如果由于text-align: justify而无法使用<br>，那么恐怕您必须添加其他元素：https://dev59.com/v3E85IYBdhLWcg3wl0nF#2703610。

您不能使用<span>元素，但可以使用段落<p>。

我会将文本分成多个段落<p>并使用margin CSS属性：

.par-just {
    text-align: justify;
    margin: 0;
    text-indent: 30px;
}

<div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading">
    <p class="par-just">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>

    <p class="par-just">
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
</div>

然而，如果使用margin: 0，则段落之间没有边距。 如果您仍需要一些边距，则可以使用负值：margin-bottom: -10px;

- HoRn