Шапка сравнения на телефоне: длинное слово переносится рядом с «×», без пустой полосыCompare table head on a phone: a long word is hyphenated beside the «×», no empty strip

24 окт. 202624 Oct 2026 · Открыть на сайтеOpen on the site

ЦельGoal

Инвестор сравнивает два лота на телефоне. Над значениями стоит шапка: тип номера · площадь и проект каждого лота. Чем она ниже, тем раньше видны сами значения.An investor compares two lots on a phone. Above the values is the head: room type · area and the project of each lot. The shorter it is, the sooner the values themselves come into view.

ЗадачаProblem

Слева от «×» в шапке лота остаётся узкое место. Если первое слово типа номера в него не помещалось («Апартаменты,», «Гостиничный», «Стандартный» на 320 px), оно целиком уходило под кнопку, и рядом с «×» оставалась пустая полоса высотой 44 px. По всем 230 лотам на сайте: 13 таких шапок на 320 px и 6 на 360 px по-русски, 5 на 320 px по-английски.Left of the «×» in the lot head there is only a narrow space. When the first word of the room type did not fit there («Апартаменты,», «Гостиничный», «Стандартный» at 320 px in Russian), the whole word moved below the button, leaving a 44 px tall empty strip beside the «×». Across all 230 lots on the site: 13 such heads at 320 px and 6 at 360 px in Russian, 5 at 320 px in English.

Как решилиHow it was solved

На экранах до 480 px длинные слова типа номера в шапке переносятся по слогам с дефисом — по словарю браузера для языка страницы: «Апарта-менты», «Гостинич-ный». Перенос — только в словах от 8 букв, не меньше 4 букв до переноса и 3 после; короткие слова остаются целыми. На компьютере шапка без изменений.On screens up to 480 px long words of the room type in the head are hyphenated by syllables, using the browser's dictionary for the page language: «Апарта-менты», «Гостинич-ный». Only words of 8 letters or more are broken, with at least 4 letters before the break and 3 after; short words stay whole. On desktop the head is unchanged.
По-русски шапок с пустой полосой больше нет: на 320 px 13 → 0, на 360 px 6 → 0; такие шапки ниже на 21 px (136 → 115 px, у одного лота 157 → 136). В замере лоты стоят парами по порядку каталога; ни одна шапка не стала выше, 70 из 1380 замеров (230 лотов × 320/360/390 px × русский/английский) — ниже. Кушадасы, апартаменты с 3 спальнями рядом с гостиничным номером в Фетхие, 320 px, по-русски: шапка 149 → 128 px.In Russian there are no heads with an empty strip any more: at 320 px 13 → 0, at 360 px 6 → 0; such heads are 21 px shorter (136 → 115 px, for one lot 157 → 136). In the measurement lots stand in pairs in catalogue order; no head got taller, 70 of 1380 measurements (230 lots × 320/360/390 px × Russian/English) got shorter. Kuşadası, a 3-bedroom apartment next to a hotel room in Fethiye, 320 px, Russian: head 149 → 128 px.
По-английски на 320 px 5 шапок с пустой полосой остаются: браузер не переносит английские слова с заглавной буквы, в том числе «Apartment,» (замер в Chromium; русские — переносит).In English 5 heads with an empty strip remain at 320 px: the browser does not hyphenate English words starting with a capital letter, «Apartment,» among them (measured in Chromium; Russian ones it does).

До и послеBefore and after

До: «Апартаменты,» и «Гостиничный» под «×», рядом пустая полоса, шапка 149 px (320 px) / Before: «Апартаменты,» and «Гостиничный» below the «×», an empty strip beside it, head 149 px (Russian, 320 px) — До: «Апартаменты,» и «Гостиничный» под «×», рядом пустая полоса, шапка 149 px (320 px)Before: «Апартаменты,» and «Гостиничный» below the «×», an empty strip beside it, head 149 px (Russian, 320 px)

После: «Апарта-менты», «Гостинич-ный» рядом с «×», шапка 128 px (320 px) / After: «Апарта-менты», «Гостинич-ный» beside the «×», head 128 px (Russian, 320 px) — После: «Апарта-менты», «Гостинич-ный» рядом с «×», шапка 128 px (320 px)After: «Апарта-менты», «Гостинич-ный» beside the «×», head 128 px (Russian, 320 px)