CSSで複数行のテキストの末尾を「...（三点リーダ）」にしたい

Question

###前提・実現したいこと
■実現したいこと
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」で検索してみると、いろいろヒットします。

###該当のソースコード

<div class="book">
	<div class="pic">
		<img src="#" height="120" width="120" alt="">
		<div class="icon">
			<ul>
				<li class="icon1">新刊</li>
				<li class="icon2">おすすめ</li>
			</ul>
		</div>
	</div>
	<!-- //.pic -->

	<div class="text">
		<p class="desc">あなたは絶対ようやくその病気めといったのの日がするますだ。同時にたくさんを欠乏人はしきりにその切望ただだけよりしよばいるますにも唱道できるましなけれで、たったにはさますませたらん。一員にするだっ方はさきほど場合をもしですたで。</p>
	</div>
	<!-- //.text -->
</div>

.book div{
    display: table-cell;
}
.book .text p.desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

###試したこと
1行テキストで横幅をオーバーした際に3点リーダを実装する場合、
以下のCSSで適用できるかと思います。

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

こちらの場合、
・display: table-cell; のかかっている箇所に実装すると反映されない
→ widthと共にmax-widthを指定。<span>などのインライン要素はブロック要素にする
・横幅を%指定していると反映されない場合がある
→ pxで指定する もしくは 該当要素を内包している要素にも横幅を指定する&ブロック要素にする

と以前調べたことがあったので、今回も応用できるのではと思い試してみましたが解決できませんでした。

CSSで実装が難しい場合の代替案でも嬉しいです。
よろしくお願いします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

[onrpp]

以前ご回答頂いた方法ではjsでの実装ですが、
CSSでの実装が第一希望なので「受付中」としています。

[kei344]

失礼しました。

Answer 1

本題ではないのですが、分かる部分のコメントをしておきます。

「-webkit-line-clamp」のように、ハイフンで始まるワードで検索しようとすると、「引き算検索」だと解釈されてしまいます。ハイフンを外して「webkit-line-clamp」で検索してみると、いろいろヒットします。

Comments

[onrpp]

なるほど！普段検索フィルターを使用しないので、完全に頭から抜けておりました。
ハイフンを外して検索したところ、結果が多数でてきました！ありがとうございます。

検索結果をみながら、どなたかご回答いただけるのを待とうと思います。

Answer 2

サンプル

こういうやつですよね。これは、高さで表示・非表示を制御してやってます。
新しいGoogle+みたいな感じです。

jQueryでP要素をクリックすると展開するのもいれておきました。

文字数で制限する場合は、PHP等を利用されるのが簡単です。

Comments

[onrpp]

ありがとうございます！
今回はCSSでの実装にこだわらず、jsでの実装でいきたいと思います。

ただなぜこのCSSが効かないのか、疑問は残りますので引き続き調べてみたいと思います。

「ベストアンサーにする」を押してしまうと解決済みに変わってしまいますかね？
これ以上他の方からのご回答がつかないようであれば、後ほどベストアンサーにさせていただきます。