web-dev-qa-db-ja.com

CSSワードブレークがMicrosoft Edgeで正しく機能しない

Microsoft Edgeでは、次のような一部のcss属性に問題があることに気付きました。

Word-break: break-Word;

これを修正する方法はありますか、これを回避する方法はありますか?

16
Panchi

Word-break: break-Wordは非推奨であり、MS EdgeまたはMS IEではサポートされていません。 これに関するMozillaのドキュメント を参照してください。

Word-breakisはMS EdgeとMS IE ここにリストがあります でサポートされています。ブラウザ。

有効なMS EdgeおよびMS IE Word-breakプロパティは次のとおりです。

Word-break: normal|break-all|keep-all|initial|inherit|unset;

あるいは、mozillaのドキュメントでは overflow-wrap: break-Word; はあなたが望む方法で動作しますWord-break: break-Word機能します。

24
Chris

代わりの解決策は、IMHOがより「インテリジェント」に動作するWord-wrapプロパティを使用することです。つまり、Wordの改行は、Wordが長すぎて行幅に収まらない場合にのみ適用され、次のことができる単語には適用されません。全体を次の行に移動するだけです。

CSS:

Word-wrap: break-Word;

Word-wrapプロパティはほとんどのブラウザでサポートされており、現在のところ、Microsoft Edge、IE11、Chrome、Firefox、OperaおよびSafariで機能することを確認できています。

注:Word-wrapoverflow-wrapに名前が変更され、Word-wrapがそのプロパティの代替名になりました。ただし、overflow-wrapはMicrosoft Edgeで認識されないため、ブラウザー間の互換性のためにWord-wrapの使用に固執します。

10
David

Word-break: break-Wordプロパティを使用するには、コンテナ/テキストの幅を指定する必要があるということです。これを回避する唯一の方法は、非公式WebKit/Blink onlyWord-wrap: break-Wordプロパティを使用することです https://caniuse.com /#search = Word-break

1
Alexey S.

使用する -ms-Word-break: break-all;Word-break: break-Word;

1
Sujit Kumbhar

言及する価値もあります。Word-break: break-Word;不適切なプロパティですが、WebKitのドキュメント化されていない非標準のプロパティ値です。これにより、Wordの折り返しはWord-wrap: break-Wordのように動作しますが、動的な幅で機能します。

1
librewolf
overflow-wrap: break-Word;

行く方法です、それは Edgeでも機能します です。

@Davidに言及していただきありがとうございます。

0
Grzegorz Smulko