(оригинальный вопрос - https://stackoverflow.com/questions/37512815/bug-with-roboto-font-and-break-word-on-desktop-chrome)
Баг обнаружен на десктопных версиях:
beta Chrome version 51
Chrome 53 (canary)
Дело в странном поведении строки при сочетании букв нижнего регистра rt
Автоматически происходит перевод строки как на рисунке ниже -
Вот пример кода демонстрирующий баг:
.container {
word-break: break-word;
}
.line {
padding: 5px;
}
.inline-block {
display: inline-block;
padding: 7px 10px;
background-color: #efefef;
border: 1px solid silver;
overflow: auto;
white-space: pre-wrap;
font-family: Roboto;
}
Бага нету в хроме для планшета и смартфона.
Как убрать баг используя данные стили css ?
P. S. Объясните, пожалуйста, почему такой баг собственно имеет место быть?
Ответ
Всё-таки нашёл решение:
font-kerning: none;
Хотя ещё вопрос, насколько оно приемлемо...
.container {
word-break: break-word;
}
.line {
padding: 5px;
}
.inline-block {
display: inline-block;
padding: 7px 10px;
background-color: #efefef;
border: 1px solid silver;
overflow: auto;
white-space: pre-wrap;
font-family: Roboto;
font-kerning: none;
}
Комментариев нет:
Отправить комментарий