如何在不使用“justify”的情况下进行文本对齐？答案

【问题标题】：How can I do text-alignment without using "justify"?如何在不使用“justify”的情况下进行文本对齐？
【发布时间】：2016-05-07 08:58:14
【问题描述】：

我的问题是，在我的网页中，我想创建报纸的设计，我需要将我的文本与通常在 css 中我们可以使用以下代码进行的对齐方式：

.text-art{
    text-rendering: optimizeLegibility; 
    text-align: justify;
    word-spacing: -1px; 

}

问题是结果会在破坏易读性的单词和整个文本的图形之间产生空白，如下图所示：

有谁知道我该如何解决这个问题？或者是否存在任何 javascript 方式来获得更好的结果？此外，我的页面是响应式的，所以当我把窗口缩小时，问题就更大了。

希望你能帮助我！提前致谢！

【问题讨论】：

您可以使用letter-spacing，但根据行中单词的大小，您仍然可能会得到很大的空格 - 这就是text-align:justify 的方式，因为您需要单词开始在行的开头和结尾
CSS text align justify big spaces的可能重复

【解决方案1】：

您的问题在于行长。就单词/行而言，您的行太短了。这就是为什么单词之间的空格很明显。

你有几个选择：

我会为小窗口选择较小的字体。

【讨论】：

【解决方案2】：

改用word-break

.text-art{
    text-rendering: optimizeLegibility; 
    word-break: break-all;
}

【讨论】：