CSS выравнивание текста в формате HTML «линии»

Question

Учитывая следующее:

<div style="float: left; line-height: 24px;"> 
    Would<br /> 
    Be Nice<br /> 
    If Aligned<br /> 
To the "top"<br /> 
</div> 

Обратите внимание, что текст выравнивается по нижней части «линии» в Chrome (IE, кажется, центрирования текста).

Есть ли способ, без оберточной каждую строку в DIV (или промежуток) в вертикально выравнивания текста в пределах своей «линии»?

JSfiddle

Answer 1

Некоторые проблемы с этим подходом:

От align block elements on top when using line-height:

Высота строки всегда добавляется выше и ниже каждого символа. Так что если ваш font-size12px и у вас есть line-height из 18px, вы получите 3px выше и 3px под каждой «линией». Каждое из этих пространств 3px называется «полуприводным»

Решение должно относиться к каждому элементу относительно, а затем применять отрицательный запас, но мы не можем сделать это здесь, потому что каждая строка не является собственный элемент, в соответствии с:

есть ли способ, без упаковки каждой строки в DIV (или промежуток)

Если вы действительно были устойчивы к модификации разметки, вот/CSS работы JavaScript вокруг. Мы не можем выравнивать вершину, когда у нас есть «полупривод» над текстом. Вместо этого нам нужно избавиться от интервала line-height сверху и снизу и создать собственное расстояние прямо на дне. Откуда мы знаем, где находится нижняя часть каждой строки? Ну, мы можем использовать элемент <br/>, но мы can't style a carriage return.

Таким образом, мы будем использовать JavaScript, чтобы получить что-то, что можем стиль, а затем добавить отступы образом:

JavaScript:

$('br').before('<div class="spacer"></div>'); 

CSS:

.spacer { 
    height: 24px; 
    display: inline-block; 
} 

Working Demo in JsFiddle

Который должен выглядеть следующим образом:

** Примечание: с inline-block DIV, вы должны установить высоту, что вы хотите для line-height и вертикального выравнивания текста в DIV top. Вы также можете использовать regular div with a negative margin-top, чтобы съесть лишнее пространство, которое требуется между абзацами. *