Пользовательский отступ маркера и встроенная завершающая кнопка в первой строке. ⇐ Html

[Anonymous]

Описание проблемы
Я реализую собственный текстовый список в виде маркеров, в котором каждый элемент:

• Имеет собственный маркер (без использования собственного стиля списка)
• Изначально показывает только первую строку
• Отображает кнопку «Дополнительно», которая визуально следует за концом первой строки текста
• Расширяется, чтобы показать все строки при нажатии кнопки (кнопка меняется на «Меньше»)

Визуально это работает в текущем пользовательском интерфейсе.

Однако я сталкиваюсь со структурным ограничением в CSS, когда текст занимает несколько строк.

Основная проблема
Когда текст переносится на несколько строк линии:

• Область маркера имеет фиксированную высоту, из-за чего последующие строки имеют неправильный отступ.
• Маркер не масштабируется по вертикали вместе с текстовым контейнером.

Я попробовал переместить маркер в псевдоэлемент ::before с отступом слева, чтобы исправить отступ. Однако из-за этого кнопка «Дополнительно» перестала естественным образом следовать за потоком текста — она выравнивается по краю контейнера, а не по концу первой строки.

Упрощенная структура

Код: Выделить всё

Some long text that may wrap into multiple lines depending on viewport width.

More

Код: Выделить всё

.bullet {
float: left;
width: 12px;
min-height: 20px;
}

.notification_text {
display: inline;
}

Ограничения/Требования

• Кнопка «Дополнительно» должна визуально следовать за концом первой строки текста
• Перенесенные строки должны правильно выравниваться под текстом (без непреднамеренных отступов)
• Положение маркера должно оставаться визуально последовательные
• Расчеты макета JavaScript нежелательны; Предпочтительны решения, ориентированные на CSS

Вопросы

• Существует ли чистый способ CSS заставить пользовательский маркер адаптироваться к полной высоте обернутого текста, сохраняя при этом правильный отступ?
• Как я могу сохранить встроенную кнопку «Дополнительно» в конце первой строки, одновременно позволяя текст для переноса под ним?
• Существуют ли какие-либо устоявшиеся шаблоны CSS (например, использование float, display:contents или shape-outside) для обработки этого пользовательского интерфейса со «встроенной конечной кнопкой»?

Будем признательны за любую информацию или ссылки.

• Вот рабочий вариант демо моего текущего прогресса: https://codepen.io/dreamcode0331/pen/pvbWpGg

Подробнее здесь: https://stackoverflow.com/questions/798 ... first-line