[css] CSS가 요소의 각 단어 다음에 줄 바꿈을 강제 할 수 있습니까?

나는 다국어 사이트를 만들고 있는데, 소유자가 번역을 도와주었습니다. 표시된 문구 중 일부는 사이트 스타일을 유지하기 위해 줄 바꿈이 필요합니다.

불행히도, 소유자는 컴퓨터 사용자가 아니므로, foo<br />bar번역을하는 동안 어떻게 든 데이터를 수정할 가능성이 있습니다.

모든 단어 다음에 깨질 요소에 적용 할 CSS 솔루션 (너비 변경 외에)이 있습니까?

(PHP 에서이 작업을 수행 할 수 있다는 것을 알고 있지만 CJK 기능에서 CSS에서 동일한 작업을 수행하기 위해 알지 못하는 멋진 트릭이 있는지 궁금합니다.)

편집하다

나는 무슨 일이 일어나고 있는지 다이어그램을 시도 할 것입니다 :

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

긴 단어는 자동으로 끊어지고 짧은 단어는 자동으로 끊어지지 않습니다. 나는 다음과 같이 보이기를 원한다.

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

답변

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

p { word-spacing: 9999999px; }

p { word-spacing: 100vw; }

<div>Short
Word</div>

div { white-space: pre-line; }

<div>
    Short
    Word
</div>

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}