エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
幅を越えた文字列を三点リーダー(…)で省略(複数行対応) - HTML・CSSテックラボ - [SMART]
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
幅を越えた文字列を三点リーダー(…)で省略(複数行対応) - HTML・CSSテックラボ - [SMART]
文字列の長さによってレイアウトが崩れるような状況の際、レスポンシブ対応のページだとスマホで表示で... 文字列の長さによってレイアウトが崩れるような状況の際、レスポンシブ対応のページだとスマホで表示できる文字数が違っていたりするので、サーバサイドで文字列制限かけるのがベストな方法とは言えないようなケースがあります。 ここではクライアントサイドにて、表示幅を超える文字数の場合は省略して「…」を最後に追加する方法を紹介します。 1行の場合 -text-overflow 例えば、表示枠が1行固定であればtext-overflowの設定で実現可能です この方法はie6から実装されており、今あるほとんどのブラウザで問題なく表示されます。 HTML部分は特別な設定はありません。 ここではCSSからアクセスできるようにクラス名を指定しています。 <div class="box-read"> 秋の野駆けでございます。上目黒へお出かけになりまして、あっちこっちと飛び回った末、野立ち所、まぁ、休憩所ですが、これ