LoginSignup
2

More than 5 years have passed since last update.

`display: inline-block`で最後の文字だけ落ちてしまう問題

Last updated at Posted at 2017-02-07

display: inline-blockposition: absoluteで幅を明示的に指定していない場合、
かつ、内容が1行のテキストの場合、最後の1文字だけ落ちてしまうことがたまにあった。

だいたいiPhone Safariで困る現象だが、稀にMac Chrome や Safari でも発生する。

再現性が高くなく、原因がよくわからなかったのだが、
おそらく要素の幅が最適なサイズになっていないことで起こる模様。

下記でとりあえず解決した。


width: max-content;

max-contentという値を初めて見た。
定義は下記(デフォルトはauto

auto
: ブラウザにコンテンツ幅の計算を委ねる事を意味する指定

max-content
: コンテンツエリア固有の望ましい幅です。

automax-contentはどう違うのかいまいちピンとこないけど、とりあえず解決としておく。

参考: https://developer.mozilla.org/ja/docs/Web/CSS/width

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2