web-dev-qa-db-ja.com

CSSは、要素内の各Wordの後に改行を強制できますか？

私は多言語サイトを構築しています。所有者がいくつかの翻訳を手伝ってくれます。表示されるフレーズの一部には、サイトのスタイルを維持するために改行が必要です。

残念ながら、所有者はコンピューターの男ではないため、foo<br />barを見つけた場合、翻訳中に何らかの方法でデータを変更する可能性があります。

すべての単語の後に壊れる要素に適用するCSSソリューション（幅の変更以外）はありますか？

（私はPHPでこれを行うことができることを知っていますが、CJK機能で同じことを達成するためにCSSでは知らない気の利いたトリックがあるかどうか疑問に思っています。）

編集

何が起こっているかを図で説明します。

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

長いWordは自動的に壊れますが、短いWordは壊れません。私はそれを次のように見せたいです：

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------
cssline-breaks
137
Ben

つかいます

.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>は親要素の幅（または1行に収まらない任意の高い値）です。そうすれば、1文字の後に改行があることを確認できます。 Chrome/FF/Opera/IE7 +で動作します（ワード間隔もサポートしているため、おそらくIE6でも動作します）。

242
Hurs van Bloob

@HursVanBloobによって与えられる答えは、固定幅の親コンテナでのみ機能しますが、流体幅のコンテナの場合は失敗します。

多くのプロパティを試しましたが、期待どおりに機能するものはありませんでした。最後に、Word-spacingに非常に大きな値を指定すると完全にうまく機能するという結論に達しました。

p { Word-spacing: 9999999px; }

または、最新のブラウザの場合は、CSS vwユニット（画面サイズの％での視覚的な幅）を使用できます。

p { Word-spacing: 100vw; }
94
Deepak Yadav

別の解決策は、要素にdisplay:table-caption;を適用することで 1行につき1ワードに文を分ける で説明されています

33
malcomio

white-space: pre-line;を使用してみてください。コード内で改行が発生するたびに改行を作成しますが、余分な空白（タブやスペースなど）は無視します。

まず、コード内の別々の行に言葉を書きます。

<div>Short
Word</div>

次に、単語を含む要素にスタイルを適用します。

div { white-space: pre-line; }

注意してください、要素内のコードのすべての改行は改行を作成します。したがって、次のように記述すると、最初のWordの前と最後のWordの後に余分な改行が追加されます。

<div>
    Short
    Word
</div>

CSS Tricks に他の空白属性の説明に関する素晴らしい記事があります。

31
Nass

与えられた答えに加えて、さまざまなソリューションから選択できるようにしたい場合...

別の方法は、コンテナの幅を0にして、オーバーフローが表示されるようにすることです。その後、各Wordがオーバーフローし、独自の行になります。

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>
6
Mr Lister

CSSの各Wordをターゲットにすることはできません。ただし、jQueryを少し使えばおそらく可能です。

JQueryを使用すると、各Wordを<span>でラップし、CSSをdisplay:blockに設定して、独自の行に配置できます。

もちろん理論上：P

4
Mark

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

最善の解決策は、Word-spacingプロパティです。

<p>を特定のサイズのコンテナ（例300px）に追加し、そのサイズをWord間隔の値として追加する必要があります。

HTML

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

CSS

div {
 width: 300px;
}

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

このようにして、文は常に壊れて列に設定されますが、段落のwithは動的になります。

ここに例Codepen

1
Cosimo wiSe

私は同じ問題に直面しました、そして、ここのオプションのどれも私を助けませんでした。一部のメールサービスは、指定されたスタイルをサポートしていません。これが私のバージョンで、問題を解決し、チェックしたすべての場所で機能します。

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

またはCSSを使用：

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