Разрывать текст, окруженный другими элементами в той же строке

Я пытаюсь отобразить 3 элемента DOM подряд. 1-й и 3-й — это div с постоянными width и height, тот, что посередине, — текст и может увеличиваться. Высота 1 и 3 должна быть равна высоте одной строки текста.

Elements Arrangement

Проблема начинается, когда текстовый элемент становится длинным. Я хотел бы отображать 1 перед первой строкой текста и 3 прямо там, где заканчивается текст.

Some other arrangement

Комбинация двух изменений помогла мне добиться этого:

  1. Ставлю flex-wrap: wrap вместо parentContainer
.parentContainer {
    display: flex;
    flex-direction: row;        
    flex-wrap: wrap;
}
  1. Я завернул каждое слово в свое <span>...</span>

enter image description here

Хотя этот подход отображает элементы правильно, у меня есть две проблемы с ним.

  1. Вместо использования Алгоритм разрыва строки Unicode мне приходится самому разбивать текст на слова. К сожалению, в тексте нет пробелов.

  2. Двойной щелчок мыши выделяет только текст в пределах одного диапазона, а не весь текст.

Интересно, есть ли другой подход к этому, который не подвержен проблемам, описанным выше?

какие элементы?

Dave Pritlove 23.04.2022 02:05

Это иконки, мы можем думать о них как о div с фиксированной шириной. я обновлю вопрос

Sergei Voitovich 23.04.2022 02:06

Если я правильно понимаю, высота строки вашего текста должна быть равна высоте иконки? Или допустимо иметь несколько строк рядом с первым значком, прежде чем течь под ним?

Dave Pritlove 23.04.2022 02:21

Высота иконки должна быть равна высоте строки

Sergei Voitovich 23.04.2022 02:23
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
4
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что ключом к достижению этого может быть использование css для установки свойства display значков/div на inline. Возможно, вам придется поиграть с размерами, чтобы получить то, что вы хотите, но создание изображения как встроенного элемента позволяет вам обращаться с ним, как если бы это было просто другое слово.

В этом примере я связал изображение, чтобы имитировать ваши ограничивающие элементы.

    img {
    width: 30px;
    aspect-ratio: 1;
    display: inline;
    vertical-align: middle;
    }
<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" />  text text here text here more text here even more text here text here more text here even more text<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" />

Чтобы это заработало, мне пришлось удалить display: flex из parentContainer. Работает как мечта!

Sergei Voitovich 23.04.2022 14:06

Другие вопросы по теме