Как я могу вернуть флажок в первую строку текста метки при сохранении слов разрывов, даже для длинных единичных слов? ⇐ CSS

[Anonymous]

Я пытаюсь вертикально выравнивать флажок в центр первой строки его метки, не полагаясь на свойства линии или другие свойства, которые могут отличаться в разных браузерах. Результат должен выглядеть аналогично списку с блоками, за исключением того, что каждая пуля должна быть флажком.

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

.wrapper {
/* "-indent-6" in Tailwind. */
text-indent: -24px;
/* "ps-6" in Tailwind. */
padding-inline-start: 24px;
/* I normally keep this on the  element. */
overflow-wrap: anywhere;
}

.checkbox {
vertical-align: middle;
/* Remove default margins. */
margin: 0;
}

.text {
vertical-align: middle;
}< /code>



Normal checkbox.




Normal checkbox but the text is BIG!




Normal checkbox, but with a really really long label text that will hopefully cause the text to wrap and show you what happens in this sort of situation.


Some really long filler text that will let you see that the line spacing between a normal paragraph and the line spacing between a wrapped checkbox label are subtly different.



WhenThisTextHasNoSpacesAtAllItGetsPlacedOnANewLineAndIDon'tKnowHowToFixIt-AndIfIAdd"Break-Word"ItCausesOverflowNoMatterWhat

< /code>
< /div>
< /div>
< /p>
Как вы можете видеть в первых двух примерах, он очень хорошо работает для метки одностроения, независимо от размера шрифта. Параграф. Это придает ему появление диагонали вдали от флажона. Я подозреваю, что это потому, что элемент 

неявно имеет отображение: inline , но добавление белого пространства: nowrap приводит к переполнению текста метки, даже если я включаю обертку на
. Есть ли способ исправить это при расстановке с приоритетом слов разрывы из -за разбивания текста в любом месте?


Подробнее здесь: https://stackoverflow.com/questions/797 ... hile-maint