1. ホーム
  2. css

[解決済み] CSSでは、要素内の各単語の後に強制的に改行することができますか?

2022-04-20 03:08:25

質問

多言語サイトを構築中で、オーナーに翻訳を手伝ってもらっています。 表示されるフレーズの中には、サイトのスタイルを維持するために改行が必要なものがあります。

残念ながら、オーナーはコンピューターに詳しくないので、もし彼が foo<br />bar 翻訳中に何らかの形でデータを修正する可能性がある。

単語が終わるたびに壊れてしまう要素に適用するCSSの解決策は(幅を変更する以外に)ありますか?

(PHPでできることは知っていますが、CSSで同じことを達成するために、私の知らない気の利いたトリックが、おそらく日中韓の機能で存在するのではないかと思っています)

EDIT

何が起こっているのか、図解してみる。

----------------          ----------------
| 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> は親要素の幅(または1行に収まらない任意の大きな値)です。そうすることで、1文字の後に改行があることさえ確認できる。Chrome/FF/Opera/IE7+で動作します(IE6もword-spacingをサポートしているので、おそらくIE6でも動作します)。