CSS만으로 콘텐츠가 맞지 않는 경우 중간 요소를 새 줄로 분리하려면 어떻게 해야 합니까?

Question

다음은 일반적인 예입니다.

으아악

요소 순서나 유형을 미리 변경하거나 중간에 도우미를 추가할 수 있습니다. 모든 텍스트가 줄바꿈되지 않았습니다. 고정된 너비나 높이를 제공할 필요는 없습니다.

DOM을 변경하는 대신 CSS만 사용하여 이 효과를 얻는 방법은 무엇입니까? 그렇다면 내용이 맞지 않으면 어떻게 중간 요소를 새 줄로 분리합니까? 가능합니까?

더 자세히 설명하고 테스트할 몇 가지 스니펫입니다. 으아악 으아악

현재 답변이 도움이 되고 수용 가능합니다. 그러나 플로트를 활용하지 않는 다른 방법이 있습니까(또는 있을 것입니까)?

Answer 1

float가 여기서 유일한 솔루션이지만 HTML 구조를 조정해야 합니다. (이것이 귀하가 요구하는 것과 반대된다는 것을 알고 있지만 다음은 몇 가지 아이디어를 줄 수 있습니다.)

으아악 으아악