Как работает white-space: nowrap в мобильном safari?

Question

[0leg5ergeev]

Добавил строке несколько css правил:

.title h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

во всех браузерах отображается корректно:

Но мобильный safari решил иначе:


При том, на мобильной версии того же lamoda.ru подобный код работает как надо.
Замечание: такие дела возникают именно с цифрами, похоже

Answer 1

[Дмитрий]

Странно, но у цифр в мобильном Safari шрифт меньше по размеру. Может быть там затесался какой-то тэг, который переносит цифры на другую строку ? Именно в мобильной версии, если это адаптивная верстка

Comments

[0leg5ergeev]

вёрстка адаптивная, тегов внутри этого h1 нет, чему я тоже удивлён

[Дмитрий]

0leg5ergeev: а вы пробовали эмулировать в хроме под iphone5 например и потом смотреть в консоли разработчика, что там вообще? Может стили какие перекрывают?

[0leg5ergeev]

Дмитрий: да, никаких проблем не заметил. да и хром != сафари

[Дмитрий]

0leg5ergeev: вы бы ссылку дали... гадаем на кофейной гуще.

Answer 2

[Михаил Чирский]

Есть вариант, что моб. Safari как и ие, не понимает элементарного, попробуйте добавить max-width: для h1, возможно решит вашу проблему.

Comments

[0leg5ergeev]

ставил, в %, в px, ставил position:absolute, нет профита

[0leg5ergeev]

у меня сложилось мнение, что сафари не применяет таких правил к числам, ибо на большинстве страниц всё в порядке.

[Михаил Чирский]

0leg5ergeev: числа не причем, я делал подобное для таблиц там и числа и цены и валюты все есть, и все обрезается прекрасно, видимо другая проблема, ну я делал, с заданием max-width: 200px в нашем случае, и все работало, без max-width: не работало даже в хроме, ну там таблица