【-webkit-line-clamp】CSSで複数行のテキストに三点リーダー(…)を付ける | astone.jeez.jp

テクノロジーカテゴリーの変更を依頼記事元:

astone.jeez.jp

1 userがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fastone.jeez.jp%2F%25E3%2580%2590-webkit-line-clamp%25E3%2580%2591css%25E3%2581%25A7%25E8%25A4%2587%25E6%2595%25B0%25E8%25A1%258C%25E3%2581%25AE%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E3%2581%25AB%25E4%25B8%2589%25E7%2582%25B9%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%2580%25E3%2583%25BC%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://astone.jeez.jp/%E3%80%90-webkit-line-clamp%E3%80%91css%E3%81%A7%E8%A4%87%E6%95%B0%E8%A1%8C%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AB%E4%B8%89%E7%82%B9%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC/">【-webkit-line-clamp】CSSで複数行のテキストに三点リーダー(…)を付ける | astone.jeez.jp</a><a href="https://b.hatena.ne.jp/entry/astone.jeez.jp/%E3%80%90-webkit-line-clamp%E3%80%91css%E3%81%A7%E8%A4%87%E6%95%B0%E8%A1%8C%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AB%E4%B8%89%E7%82%B9%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC/">はてなブックマーク - 【-webkit-line-clamp】CSSで複数行のテキストに三点リーダー(…)を付ける | astone.jeez.jp</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

【-webkit-line-clamp】CSSで複数行のテキストに三点リーダー(…)を付ける | astone.jeez.jp

この実装は今現在どのブラウザ、どのデバイスでも使えるノウハウとなっている。実装ただし、スマホ向... この実装は今現在どのブラウザ、どのデバイスでも使えるノウハウとなっている。実装ただし、スマホ向けWebサイト等を制作する場合、様々な端末を対象にするために画面サイズなどがそれぞれ異なり、決まった文字組みでのマークアップを行う事は難しい。いわゆるリキッドデザインのような可変のデザインの場合、１行に収まる文字数が変化するのでプログラムによる◯◯文字以上は置き換え、のような仕組みもあまりよろしくない。そこで「-webkit-line-clamp」というスタイルを使用する。以下抜粋『-webkit-line-clamp』とは指定した行数の最後のテキストに『…』を表示させるプロパティです。使用するときは『-webkit-box-orient』で要素をフレキシブルボックスにしないと指定しても『…』は表示されず、『height』が指定されていない場合は『-webkit-line-cla