text-align: justify not working

Question

Я успешно использовал метод, описанный here (link to article) в течение последних нескольких дней.

Он показывает, как избежать вычисления процентных полей для блоков в сетке, применяя text-align: оправдывать родительский контейнер.

An: после того, как элемент psuedo гарантирует, что на следующей строке всегда будет «текст», чтобы убедиться в его оправдании.

Но в this particular instance (link to 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 работ растяжением пространства между словами, разделенных пробелами. Таким образом, чтобы разрывы между строчными блоками растягивались, между ними должны быть пробелы. В вашем примере случае блоки не имеют пробелов между ними.

Добавить пробелы, и блоки будут оправдываться.