Как скрыть переполнение определенного объекта, если общая ширина превышает окно (только CSS?) ⇐ CSS

[Anonymous]

При оформлении панели навигации для использования на мобильных и настольных устройствах я пытался скрыть переполнение одного из элементов (заголовка страницы), если общая ширина всех элементов на панели навигации превышает ширину окно. Например, если общая ширина панели навигации составляет 400 пикселей, а ширина области просмотра — 350 пикселей, то все элементы, кроме заголовка, сохранят заданную ширину, а переполнение заголовка будет скрыто. Соответствующий элемент находится в середине списка, например:

[*]Главная [*]Название [*]ВЫХОД А текущий CSS, который я использую для стилизации, таков:

.navbar ul { пробел: nowrap; тип стиля списка: нет; маржа: 0 авто; заполнение: 0; переполнение: скрыто; цвет фона: #000000; положение: фиксированное; верх: 0; слева: 0; ширина: 100%; z-индекс: 999; } .navbar ли { плыть налево; } .navbar ли а { ширина: авто; отображение: встроенный блок; белый цвет; выравнивание текста: по центру; отступ: 14 пикселей 16 пикселей; текстовое оформление: нет; } .navbar ли пролет { максимальная ширина: 35 пикселей; отображение: встроенный блок; белый цвет; выравнивание текста: по центру; отступ: 14 пикселей 16 пикселей; текстовое оформление: нет; переполнение: скрыто;; } Кроме того, я бы предпочел не использовать JavaScript, поэтому, если есть решение только с помощью CSS, это было бы гораздо предпочтительнее!