Обрезка текста при использовании overflow: hidden
У меня есть этот простой html и css http://jsfiddle.net/JVfVv/1/
проблема в том, что текст обрезается под safari/chrome / firefox на mac. Удаление переполнения: hidden исправляет проблему, однако эта строка необходима по другим причинам. Удаление line-height: 1; кажется, чтобы исправить проблему, однако я получаю это из моей таблицы стилей сброса, и я не понимаю, почему это вызывает обрезку.
может кто-нибудь объяснить, почему это происходит, и как исправьте это, пожалуйста? спасибо
2 ответов
чтобы ответить на вопрос, почему это происходит, я считаю, эта конкретная фраза от разделе шрифты спецификации CSS 2.1 (акцент мой):
размер шрифта соответствует квадрату em, концепции, используемой в типографии. обратите внимание, что некоторые символы могут кровоточить вне их em квадратов.
на line-height: 1 декларация устанавливает высоту абзаца на ту же высоту, как font-size (так как только абзац имеет одну строчку). Тот факт, что некоторые символы отрезаны, означает, что их глифы истекают кровью за пределами их квадратов em (я не знаю, как окончательно доказать, что это правда, я просто спекулирую на основе доказательств).
Что касается решения, самым простым решением было бы использовать больший line-height настройка, например 1.1 или 1.2.
Вы можете установить height в CSS, который решает проблему?
p {
line-height: 1;
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, Arial; font-size: 30px;
height:32px; /* this appears to solve the problem */
}