Как сильно форсировать высоту строки в CSS, без растяжений?

Question

Как я могу форсировать высоту строки в CSS таким образом, чтобы никакие большие буквы не растягивали высоту строки. Вместо этого они должны обрезаться под вышеуказанной линией или даже сливаться с вышеуказанной линией.

CSS line-height кажется, по умолчанию работает как опция "как минимум" высоты строки в MS Word. Я хочу, чтобы он работал так же, как в MS Word.

Например:

• http://jsfiddle.net/DUpgN/

Там строки имеют разную высоту, потому что в одной строке есть несколько больших букв. Я хочу, чтобы все линии были одинаковой высоты независимо от.

Answer 1

Глифы (визуальные представления персонажа) центрированы вертикально внутри встроенного блока. Если высота строки больше, чем высота содержимого, половина разницы добавляется как пробел вверху; такое же количество также добавляется внизу.

Это относится к основному, не жирному тексту в вашем примере.

Когда он установлен на незаменяемый встроенный элемент, он определяет высоту, используемую для вычисления высоты окружающего линейного блока.

Таким образом, в тексте, выделенном жирным шрифтом, размер шрифта по-прежнему будет на 8,5 пикселей выше, что вызывает проблему.

Вы можете предотвратить это, установив высоту строки меньше размера шрифта ( см. Эту демонстрацию). Поскольку это встроенный элемент, и нет overflow:hidden; он будет по-прежнему видимым, но он не добавит ни одного пикселя к остальной части высоты строки текста.

Насколько я знаю, невозможно "растянуть" буквы, если вы не используете некоторые свойства CSS3, такие как transform:scale(value) и т.п.

Ссылка

---

Код:

<p>ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac <b>ac</b>
ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac</p>

CSS:

p {
    line-height:17px;        
    font-size:15px;
    width:150px;
}
b {
    font-size:25px;
    line-height:1px; 
}​

Answer 2

Возможно добавлю

display:inline-block;
height:13px;

к тегу b

Answer 3

Не уверен, что это то, что вам нужно, но это обрежет любой текст, который больше высоты строки.

b {
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
   } 

Answer 4

Ни за что. Вы можете подумать об увеличении высоты строки, например, на 30 пикселей, и вы получите одинаковую высоту для всех линий.