行末の単語がズレる問題を解消

LINEで送る
Pocket

オンライン文章校正支援サービス「PRUV」の不具合(?)を1つ解決しました。

文章を解析すると、右側に解析した文章を出力します。この文章の右端(行末)にマウスを近づける(オンマウスとか、ホバーといいます)と、改行位置がズレて最後の文字や単語が次の行にピョコッと移動してしまうのです。

これだけなら無様なだけですが、ここにマーキング(何らかの指摘)が発生すると厄介です。指摘を確認するためマーキングされた単語をクリックしようとすると、その単語が次行に移動してしまう。移動先にマウスを動かすと、その単語は元の位置にピョコッと戻ってしまう。これではクリックできない!

Chromeはオンマウス時に要素が1ピクセルズレるそうです。そこでaタグに

display: inline-block;

を指定することで解消しました。

かなり初期から悩んでいたのですが、調べてみると意外に簡単な原因&解決方法でした。もっと早くやればよかった。