Как разбить список HTML на последний возможный пробел
У меня есть простой список HTML:
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
Я хочу отобразить список со следующими функциями:
- Предметы подряд.
- Список будет иметь максимальную ширину, после которой ожидается, что элементы перейдут на следующую строку.
- Элементы должны прерываться только в начале/пробелах (не в середине слова).
- Строки должны содержать как можно больше текста до разрыва.
Желаемый результат:
[ maximum width ]
First Item * Second
Item * Third Item
Неудачные попытки:
№1 (разрывы слов)
[ maximum width ]
First Item * Second I
tem * Third Item
#2 (предмет не ломается должным образом)
[ maximum width ]
First Item * Second Item
* Third Item
№3 (разрыв строки «преждевременно»)
[ maximum width ]
First
Item * Second Item *
Third Item
Обновлять:
Простой li {display: inline;} не будет работать, если HTML не имеет отступа/расстояния (некоторые фреймворки, например, GatsbyJS, автоматически «сжимают» HTML):
<ul><li>First Item</li><li>Second Item</li><li>Third Item</li></ul>
Связано: stackoverflow.com/questions/5078239/…
Ответы 2
Как уже сказал Темани li {display: inline;} работает нормально. (Скрипка)
Это, кажется, отлично работает с простым HTML, но не работает для меня с GatsbyJS (получение № 3). Я заметил, что в версии gatsby первый элемент (который имеет 2 пробела и прерывается преждевременно) имеет на один глиф меньше в представлении визуализированных шрифтов (Инструменты разработки -> Элементы -> Стили -> Вычисленные -> Визуализированные шрифты) . Что это может означать? Возможно, что-то с моим окружением? Мой сервер gatsby работает через WSL.
Хорошо, это не GatsbyJS как таковой. Это не будет работать, если в HTML нет отступа: jsfiddle.net/8puLkcry
Кажется, это работает для меня:
ul {
max-width: 100px;
}
ul li {
display: inline;
}
ul li::after {
content:" ";
}
Почему часть after?
Ну, если после каждого <li> в HTML источник нет пробела/новой строки, строка не будет разрываться в конце элементов, что вполне может привести к «преждевременному» разрыву строки (как в неудачном попытка №3). Некоторые фреймворки автоматически «сжимают» HTML — в основном удаляя эти пробелы — и это требует явного добавления пробела после каждого элемента.
Вот примеры скрипки (попробуйте удалить after из css и посмотрите, как вы получите неудачную попытку № 3).
li {display:inline}должно хватить