CSS가 요소의 각 단어 뒤에 자동으로 줄 바꿈을 만들 수 있는 방법은 무엇입니까?

요소의 모든 단어에 대한 CSS 줄바꿈

다국어 웹사이트에서 소유자가 HTML에 익숙하지 않은 경우 줄바꿈을 통해 일관된 시각적 스타일을 유지하는 것이 어려울 수 있습니다. . 번역 중에 수정할 수 있는 수동 줄 바꿈에 의존하는 대신 각 단어 뒤에서 자동으로 줄 바꿈하는 CSS 솔루션을 살펴보겠습니다.

한 가지 접근 방식은 단어 사이에 추가 공간을 만드는 단어 간격 속성을 사용하는 것입니다. 그러나 단일 문자 이후에도 줄 바꿈을 보장하려면 상위 요소의 너비를 설정해야 합니다. 다음 CSS 코드는 이를 보여줍니다.

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.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;
}

여기서 부모 요소의 원하는 너비입니다. 이 솔루션을 사용하면 단일 단어 이후에도 줄바꿈이 발생하여 원하는 시각적 레이아웃을 유지할 수 있습니다.

위 내용은 CSS가 요소의 각 단어 뒤에 자동으로 줄 바꿈을 만들 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!