Javascript-форум - Зависимость длины строки от ширины окна

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Зависимость длины строки от ширины окна (https://javascript.ru/forum/dom-window/82937-zavisimost-dliny-stroki-ot-shiriny-okna.html)

Зависимость длины строки от ширины окна

Всем привет. Подскажите как решить задачу. Есть горизонтальный список.

<ul>
<li><a class="" href="">Один</a></li>
....
<li><a class="" href="">N</a></li>
<i class="icon-more"></i> // Вертикальное троеточие
</ul>

Нужно при уменьшении экрана(окна) прятать те пункты,которые не помещаются. Тоесть как то высчитывать расстояние от троеточия до первого от него пункта, что ли. Ума не приложу. Но видел тут. При уменьшении до 480 где то, появляется троеточие...

Rise,
я в курсе, что такое адаптивный дизайн. Вопрос в другом был. Например при ширине 720 у меня все пункты в три ряда по шесть пунктов. Предположим я спрятал все кроме шести и показал кнопку,которая будет их показывать. При ширине 680 у меня шестой не помещается и прыгает в следующий ряд, и нужно его скрыть тоже, при 640 с пятым тоже самое. Что для каждых 40пх писать правило? То есть как прятать те пункты, которые не помещаются при уменьшении экрана?

тут мне надо спрятать 5 пунктов.
А тут уже шесть

На мой взляд лучше подумать о другом дизайне.
Плохо делать маленькие элементы для мобил. Элементы должны быть такими, что бы можно гарантировано пальцем тыкнуть в него, а не в соседа.

А так можно поиграться с flex и размеры.
Идея примерно такая

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
body {
    font-size: 16px;
}

ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    height: 1em;
    overflow-y: hidden;
}
li {
    padding: 0 4px;
    margin: auto;
}
</style>
</head>
<body>
<ul>
<li><a class="" href="">Item 1</a></li>
<li><a class="" href="">Item 2</a></li>
<li><a class="" href="">Item 3</a></li>
<li><a class="" href="">Item 4</a></li>
<li><a class="" href="">Item 5</a></li>
<li><a class="" href="">Item 6</a></li>
<li><a class="" href="">Item 7</a></li>
<li><a class="" href="">Item 8</a></li>
<li><a class="" href="">Item 9</a></li>
</ul>
</body>
</html>

Смотреть надо на мобилах. На десктопе трудно размер экрана уменьшить

Rise, ааа, по ширине прятать. Вот эта мысль и нужна была. Спасибушки)

Цитата:

Сообщение от voraa

Плохо делать маленькие элементы для мобил.

Это просто пример

Rise, я думал в другой плоскости). Для этого и нужна поддержка. Разве нет)?