Flexbox And Truncated Text | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Situation: you have a single line of text in a flex child element. You don’t want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. F
二行目の最後を「...」をクロスブラウザで実現 - Qiita
文字が溢れたら「...」を出すのは text-overflow: ellipsis がありますが、一行の場合にしか利用できません。二行目に「...」を出すのは、 -webkit-line-clamp というのがありますが、クロスブラウザでは利用できません。 CSSだけで実現するのは不可能だと思ってたんですけど、出来ちゃいました。 実物はこちらでご確認ください。 .lineclamp { /* config */ line-height: 1.5; height: 3em; background-color: #fff; /* config end */ position: relative; padding-right: 1em; overflow: hidden; } .lineclamp:before { content: "..."; position: absolute; righ
複数行のテキストに対してtext-overflow: ellipsisを実装する - ワシはワシが育てる
一行のテキストが規定範囲を超えた場合に「…」をつけて省略する時にお馴染みの「text-overfolow: ellipsis」を複数行に対してかける方法について。 といってもtext-overflowはどう足掻いても複数行にかけることができないので、CSSで同様の表現をするための実装方法です。 文章で説明すると分かりづらいので図にしてみました。 こんな感じで「囲い(#wrapper)」「テキスト(#text)」「…」の3つで構成されています。 それぞれCSSは以下のように設定します。 #wrapper { height: 300px; overflow: hidden; } #text { position: relative; height: 300px; z-index: 1; } #text:after { position: absolute; display: block; co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsdo.it
