スマートフォン・タブレットからインターネットサーバーオペレーション HTML5.x

APPW.jp HTML5.x

flexbox でも要注意の word-break プロパティ

word-break プロパティは、CSS Text Module Level 3 の草案にあります。word-wrap プロパティとともに Internet Explorer にてサポートされてきたという経緯があるようですが、現在、他のいくつかのブラウザでもサポートしています。

草案では、word-break プロパティ値には、normal、break-all、keep-all の3つがあります。word-wrap プロパティ値には、normal、break-word の2つです。word-wrap プロパティは、overflow-wrap プロパティという名前でも策定されているようです。サポート状況はブラウザによってまちまちです。

flexbox の確認の際、このプロパティの値により影響のあるブラウザもありましたので、要注意です。

word-break: keep-all ;
word-wrap: break-word ;

常用は日本語ですが、英語の単語や短文を用いることもあります。改行の禁則に応じつつ、ボックスの幅により強制的に改行もあり、というようなところでしょうか。

今後の仕様次第、ブラウザの実装次第なのですが、現段階でも一応おさえておいたほうが良さそうです。

@supports ルールを設定してみます

CSS3 columns プロパティを試します

Chrome 27 で flexbox の寸法と軸を試します

Chrome 27 で Flexbox の寸法の混在を試します

Flexbox の寸法とラインの組み合わせを試します

Chrome 27 で inline-flex を試します

CSS3 メディアクエリをおさらい

CSS3 角丸とドロップシャドウを確認

CSS3 グラデーションの最新仕様を確認

Chrome 24 でフレキシブルボックスの軸を試します

via IPv4

カテゴリー

アーカイブ

Popular Posts