###前提・実現したいこと
■実現したいこと
CSSで複数行のテキストの末尾を「...(三点リーダ)」にしたい
(例)
あなたは絶対ようやくその病気めといったのの日がするますだ。
同時にたくさんを欠乏人はしきりにその切望ただだけよりしよばいるますにも
唱道できるましなけれで、たったにはさますませたらん。
↓
あなたは絶対ようやくその病気めといったのの日がするますだ。
同時にたくさんを欠乏人はしきりにその切望ただだけよりしよばいるます...
以下の記事を参考にしました。
http://qiita.com/yoshida-hi/items/055c36e015f0bf8fe4f6
https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/
→ Chromeで確認すると、デモの箇所が白く抜けており確認できません。
■ついでに知りたいこと
他の記事も参考にしたいと思い、「-webkit-line-clamp」をGoogleで検索したところ、
「-webkit-line-clamp に一致する情報は見つかりませんでした。」と結果がでます。
複数の参考サイトから単語をコピペして検索しても同様の結果になりますが、
原因がわかりましたら、教えてもらえると嬉しいです。
→maisumakunさんよりご回答頂きました(初歩的なミスでお恥ずかしい)
「-webkit-line-clamp」のように、ハイフンで始まるワードで検索しようとすると、「引き算検索」だと解釈されてしまいます。ハイフンを外して「webkit-line-clamp」で検索してみると、いろいろヒットします。
###該当のソースコード
html
1<div class="book"> 2 <div class="pic"> 3 <img src="#" height="120" width="120" alt=""> 4 <div class="icon"> 5 <ul> 6 <li class="icon1">新刊</li> 7 <li class="icon2">おすすめ</li> 8 </ul> 9 </div> 10 </div> 11 <!-- //.pic --> 12 13 <div class="text"> 14 <p class="desc">あなたは絶対ようやくその病気めといったのの日がするますだ。同時にたくさんを欠乏人はしきりにその切望ただだけよりしよばいるますにも唱道できるましなけれで、たったにはさますませたらん。一員にするだっ方はさきほど場合をもしですたで。</p> 15 </div> 16 <!-- //.text --> 17</div>
CSS
1.book div{ 2 display: table-cell; 3} 4.book .text p.desc{ 5 display: -webkit-box; 6 -webkit-box-orient: vertical; 7 -webkit-line-clamp: 2; 8}
###試したこと
1行テキストで横幅をオーバーした際に3点リーダを実装する場合、
以下のCSSで適用できるかと思います。
CSS
1p { 2 overflow: hidden; 3 text-overflow: ellipsis; 4 white-space: nowrap; 5 }
こちらの場合、
・display: table-cell; のかかっている箇所に実装すると反映されない
→ widthと共にmax-widthを指定。<span>などのインライン要素はブロック要素にする
・横幅を%指定していると反映されない場合がある
→ pxで指定する もしくは 該当要素を内包している要素にも横幅を指定する&ブロック要素にする
と以前調べたことがあったので、今回も応用できるのではと思い試してみましたが解決できませんでした。
CSSで実装が難しい場合の代替案でも嬉しいです。
よろしくお願いします。