CSS가 요소의 모든 단어 다음에 줄바꿈을 유도할 수 있나요?

다국어 웹사이트 개발에서는 일관성과 가독성을 유지하는 것이 중요합니다. 예를 들어 스타일에 따라 특정 문구 내에서 줄바꿈이 지정되는 다국어 텍스트가 있는 웹사이트를 생각해 보세요. 그러나
태그를 사용한 수동 줄 바꿈은 번역 중에 실수로 데이터를 변경할 수 있는 비기술적 기여자를 처리할 때 문제가 됩니다.

모든 단어 뒤에 줄 바꿈을 적용하는 CSS 솔루션이 있습니까? 단어 길이에 관계없이 요소에서?

PHP를 사용하여 이를 달성할 수 있음에도 불구하고 잠재적인 CSS를 탐색해 볼 가치가 있습니다. Solutions.

CSS 솔루션: 단어 간격 및 컨테이너 조작

원하는 줄바꿈 효과를 얻으려면 다음 CSS 속성을 사용하세요.

.one-word-per-line {
    word-spacing: ; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

이 접근 방식에서 .one-word-per-line 클래스는 단어 사이의 간격(단어 간격)을 제어하여 효과적으로 각 단어를 해당 줄에 밀어넣습니다. .your-classname 클래스는 컨테이너의 너비가 항상 단일 문자를 수용할 수 있을 만큼 충분히 넓어 필요한 경우 줄 바꿈을 트리거하도록 다양한 너비 및 표시 속성을 설정합니다.