CSS эквивалент фотошопа Justify-All

Question

Я хотел бы взять элемент h2 и разделить его текст по ширине его div.

text-align:justify;

распространяет текст только в том случае, если его ширина больше ширины контейнера ... вроде как Photoshop's justify-left

Answer 1

CSS:

h2 {text-align: justify;}
h2 span {width: 100%; display: inline-block;}

HTML:

<h2>This is a h2 heading<span></span></h2>

Обратите внимание, что это добавляет невидимую дополнительную строку, что приводит к слишком большой высоте. Вы можете компенсировать это:

h2 {text-align: justify; height: 1.15em;}

А для очень аккуратной разметки, работающей только для браузеров, отличных от IE7 или ниже, вы можете использовать селектор ::after:

h2::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}

См. демонстрационная скрипка всех трех решений .

Answer 2

Ответ машины времени, когда текстовый модуль CSS 3 становится рекомендацией:

text-align: justify;
text-align-last: justify;

Впрочем, раньше он будет бесполезен.