text-align:justify not working

Question

过去几天我已成功使用此处描述的方法(链接到文章).

它显示了如何通过将text-align:justify应用于父容器来避免计算网格中块的基于百分比的边距.

An:在psuedo元素之后确保总是将"text"强制到下一行以确保它是正确的.

但是在这个特定的实例中(链接到jsFiddle),块不响应text-align:justify.下面的代码在其他地方一直很好用,所以有些东西我不见了.

HTML

<div class="container"><div class="contents"></div><div class="contents"></div><div class="contents"></div><div class="contents"></div><div class="contents"></div></div>

CSS

.container {
     font-size: 0.1px;
     text-align:justify;
}

.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.contents {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

Answer 1

text-align:justify通过拉伸单词之间的空格来工作,由空格字符分隔.因此,为了使内联块之间的间隙伸展,它们之间必须有空格字符.在您的示例中,块之间没有空格.

添加空格,块将是合理的.