HTML/CSS「レスポンシブトランケーション」

Question

私は最近、自分のサイトのレスポンシブバージョンを発売しましたが、デスクトップビューとモバイルビューの両方の単一行にすべてを適合させるため、各1行のテキストのすべてのラインにすべてを適合させるので、多くの単一行のテキストを含む割合の幅の部門が本当に悪く見えることがわかりました。テキストが長すぎるか短すぎるかの。

私のマークアップは、（長いアンカーテキスト付き）リンクの単一の順序付けられていないリストです - 含まれる部門の幅に応じてアンカーテキストを切り捨てるという提案はありますか？

Answer 1

2つのオプションを思いつくことができます。

1つは、ここで説明するようにJavaScriptを使用して自分でそれを行うことです。

JavaScriptでテキスト幅を計算します

ブラウザが実際にテキストをレンダリングするまで、テキストの幅を決定する方法はないと思います。

表示しないことを確認してください：なし、またはブラウザが実際にレンダリングせず、幅を決定できません。

2つ目は、CSSにあなたのためにそれをさせることです。簡単ですが、ほとんどすべての柔軟性を失います。

CSSにテキストをEllipsisに遮断する方法を推測させてもらえない場合は、Text-Overflow：Ellipsisを試すことができます

http://www.quirksmode.org/css/textoverflow.html