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

[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