CSS는 요소의 각 단어 뒤에 줄 바꿈을 강제로 수행할 수 있습니까?

CSS는 요소의 각 단어 뒤에 줄 바꿈을 강제로 수행할 수 있습니까?

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

때문에, 만약 이 하게도불, 은컴아때문, 그본다면을 본다면, 만약가에.foo<br />bar그가 번역하는 동안 어떻게든 데이터를 수정할 가능성이 있습니다.

모든 단어 뒤에 깨지는 요소에 적용할 CSS 솔루션(폭 변경 외에도)이 있습니까?

(PHP로도 할 수 있다는 것은 알지만, CSS에서도 CJK 기능과 같은 것을 수행하기 위해 제가 모르는 멋진 트릭이 있는지 궁금합니다.)

편집

무슨 일이 일어나고 있는지 도표화해 보겠습니다.

----------------          ----------------
| 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이 제공한 답변은 고정 너비 상위 컨테이너에서만 작동하지만, 유체 너비 컨테이너의 경우에는 작동하지 않습니다.

저는 많은 부동산을 시도해 보았지만, 어떤 것도 예상대로 되지 않았습니다.마침내 저는 매우 큰 가치를 부여하는 것이 완벽하게 잘 작동한다는 결론에 도달했습니다.

p { word-spacing: 9999999px; }

또는최를의저 CSS 용수있다를 할 수 .vw단위(화면 크기의 % 단위로 표시되는 시각적 너비)입니다.

p { word-spacing: 100vw; }

사용해 보십시오.white-space: pre-line;코드에 줄 바꿈이 나타나는 곳마다 줄 바꿈을 작성하지만 추가 공백(탭 및 공백 등)은 무시합니다.

먼저, 코드에서 단어를 별도의 행으로 작성합니다.

<div>Short
Word</div>

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

div { white-space: pre-line; }

그러나 요소 내부의 코드에서 줄 바꿈이 발생할 때마다 줄 바꿈이 발생합니다.따라서 다음을 쓰면 첫 번째 단어 앞과 마지막 단어 뒤에 줄 바꿈이 추가됩니다.

<div>
    Short
    Word
</div>

다른 화이트 스페이스 속성을 설명하는 CSS Tricks에 대한 훌륭한 기사가 있습니다.

대체 해결책은 다음을 적용하여 행당 하나의 단어로 문장을 구분하여 설명합니다.display:table-caption;에.

주어진 답변 외에 다른 솔루션을 선택할 수 있는 경우...

다른 방법은 용기에 너비를 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>

<span>이고 인인요추니다가합고를 합니다.display: inline-block의 합니다.max-width: min-content;,min-content텍스트/문장에서 가장 작은 단어의 값/폭입니다.

사용하는 경우min-content가장 긴 가 될 입니다.폭"이 가장 긴 단어가 될 것입니다. 이우경Example당신의 긴 단어입니다.하지만 만약 당신이 다른 단어를 가지고 있다면,and if또는 3분의 2 문자 단어가 몇 개 있으면 이 단어는 같은 줄에 들어갈 수 있습니다.

온워드 동작을 유지하려면 예를 들어 고정된 너비를 지정할 수 있습니다.5px.

CodePen에서 더 많은 예제를 확인하십시오.

.wrapWord {
  display: inline-block;
  max-width: min-content;
}

<div>
  <span class="wrapWord">
   Example Word
  </span>
</div>

은 가장좋해은책입니다.word-spacing소유물.

추가합니다.<p>.300px 및. 및 해당 크기를 워드프로세서의 값으로 추가해야 하는 경우.

HTML

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

CSS

div {
 width: 300px;
}

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

이런 식으로 문장은 항상 깨지고 열에 설정되지만 문단의 내용은 동적입니다.

예를 들어 보겠습니다. 코데펜

CSS의 각 단어를 대상으로 할 수는 없습니다.하지만 약간의 jQuery를 사용하면 가능할 것입니다.

하면 각 를 jQuery 사여각단다음과같있수습다니묶을이어를로 묶을 수 .<span>그런 다음 CSS가 범위를 다음으로 설정합니다.display:block그것은 그것을 자신의 선에 둘 것입니다.

물론 이론상으로는 :P.

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

두 가지 차원에서 유연한 자녀를 둔 유연한 상위 컨테이너 내에서 작동하는 솔루션을 찾는 고객에게 적합합니다.예: navbar 버튼.

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

저는 고객이 세 단어 제목을 다른 줄에 붙이기를 원하는 프로젝트에서 이것을 했습니다.기본적으로 CSS로 공백을 늘립니다. 공백을 사용하여 선을 구분합니다.

    word-spacing:9999px;
    white-space: pre-line;

추가할 수 a)span에 CSS를 하여 각 에 줄 할 수 각 단어 주위에 CSS를 사용하여 각 단어 뒤에 줄 바꿈을 삽입할 수 있습니다.

삽입하는 "내용"은 다음과 같습니다.\a이는 십진수 10에 대한 16진수로, 새 줄 문자입니다.

.break-after-each-word > .word::after {
  content: "\a";
  white-space: pre;
}

<div class="break-after-each-word">
  <span class="word">Foo</span>
  <span class="word">Bar</span>
  <span class="word">Baz</span>
</div>

저 같은 경우에는.

    word-break: break-all;

완벽하게 작동했습니다, 저 같은 다른 신입사원에게 도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/4212909/can-css-force-a-line-break-after-each-word-in-an-element