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

여기서 <parent-width>부모 요소의 너비 또는 한 줄에 맞지 않는 임의의 높은 값입니다. 이렇게하면 한 글자 뒤에 줄 바꿈이 있는지 확인할 수 있습니다. Chrome / FF / Opera / IE7 + (그리고 단어 간격도 지원하기 때문에 IE6)에서도 작동합니다.

@HursVanBloob의 답변은 고정 너비 부모 컨테이너에서만 작동하지만 유체 너비 컨테이너의 경우 실패합니다 .

많은 속성을 시도했지만 예상대로 작동하지 않았습니다. 마침내 나는 word-spacing매우 큰 가치 를 부여 하는 것이 완벽하게 작동 한다는 결론에 도달했습니다 .

p { word-spacing: 9999999px; }

또는 최신 브라우저의 경우 CSS vw단위 (화면 크기의 % 단위의 시각적 너비)를 사용할 수 있습니다 .

p { word-spacing: 100vw; }

대체 솔루션은 요소 에 적용 하여 한 줄에 한 단어로 문장을 구분 하는 방법에 설명되어 있습니다.display:table-caption;

를 사용해보십시오 white-space: pre-line;. 코드에 줄 바꿈이 나타날 때마다 줄 바꿈을 만들지 만 여분의 공백 (탭 및 공백 등)은 무시합니다.

먼저 코드에서 별도의 줄에 단어를 작성하십시오.

<div>Short
Word</div>

그런 다음 단어를 포함하는 요소에 스타일을 적용하십시오.

div { white-space: pre-line; }

조심 하지만이 요소 내부 코드의 모든 줄 바꿈은 줄 바꿈을 만듭니다. 따라서 다음을 쓰면 첫 단어 앞과 마지막 단어 뒤에 줄 바꿈이 추가됩니다.

<div>
    Short
    Word
</div>

CSS 공백에 대한 다른 공백 속성을 설명 하는 훌륭한 기사가 있습니다 .

주어진 답변 외에도 다른 솔루션 중에서 선택하고 싶다면 ...

다른 방법은 컨테이너에 너비를 0으로 지정하고 오버플로가 표시되도록하는 것입니다. 그런 다음 각 단어가 초과되어 자체 줄에있게됩니다.

div {
  width: 0;
  overflow: visible;
}

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

또는이 width값을 읽을 때까지 값이 존재한다면 새로 제안 된 값 중 하나를 사용할 수 있습니다 .

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>

CSS에서 각 단어를 타겟팅 할 수 없습니다. 그러나 약간의 jQuery를 사용하면 아마도 가능할 것입니다.

jQuery를 사용하면 각 단어를 a <span>로 묶은 다음 CSS 세트 범위를 확장하여 display:block자체 줄에 넣을 수 있습니다.

물론 이론적으로 : P

https://jsfiddle.net/bm3Lfcod/1/

두 차원 모두에서 유연한 자식을 가진 유연한 부모 컨테이너 내에서 작동하는 솔루션을 찾는 사람들을 위해. 예. 탐색 표시 줄 단추.

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

나는 똑같은 문제에 직면했으며 여기에있는 옵션 중 어느 것도 도움이되지 못했습니다. 일부 메일 서비스는 지정된 스타일을 지원하지 않습니다. 다음은 문제를 해결하고 내가 확인한 모든 곳에서 작동하는 내 버전입니다.

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

또는 CSS를 사용하여 :

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

가장 좋은 해결책은 word-spacing재산입니다.

추가 <p>특정 크기 (예와 함께 용기에 300px) 당신이 단어 간격의 값으로 그 크기를 추가해야합니다 후.

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

이런 식으로 문장은 항상 깨져서 열에 설정되지만 단락의는 동적입니다.

다음은 Codepen 의 예 입니다.

나의 경우에는,

    word-break: break-all;

완벽하게 일했다, 그것이 나와 같은 다른 새로운 이민자를 돕기를 바랍니다.