テキストが折り返されるのにハイフンが表示されないのはなぜですか?

Question

これはコードです:

リーリー

単語は希望どおりに折り返されていますが、ハイフン自体 (「-」) が単語の折り返される場所に表示されません。

さらに、 のテキストは英語 (en)、

であることを 明示的に ブラウザに伝えたいと考えています。

内のテキストはドイツ語 (de) です。すべてのブラウザーに言語固有のハイフン用の組み込みディレクティブがあるわけではないことはわかっていますが、試してみたかったのです。

このコードも JS Bin に保存しました。 ＃＃＃＃＃＃＃＃＃＃＃＃ありがとう！

Answer 1

1.) word-break: Break-all; は使用しないでください。ハイフンの規則に関係なく、任意の場所で単語が分割されます。

2.) 自動ハイフンを有効にするには、html タグの lang 属性を hyphens: auto; と組み合わせて使用​​します。

3.) 他の言語を含む任意の要素で 異なる lang 属性を使用できます - lang="de" をどのように記述するかは以下を参照してください。最後の li 要素に適用されます。

リーリー リーリー