複数行の文章が長い場合に文末に「...」をつける「-webkit-line-clamp」がうまく当たらない

Question

タイトルにある通り、複数行に渡る文の文末に「...」をつけたく、調べていたら、ブラウザは限定されるものの「-webkit-line-clamp」を用いて、「...」をつける行数を指定する方法を見つけ試してみました。
実際に試してみたのがこちらです。

ここではリストの中で使っているのですが、どういうわけかリスト内で使うと「...」の行がどんどん上に上がってきてしまうといういう状況になってしまっています。

どこか私の表記方法に誤りなどはありますでしょうか？
調べても原因がわからないので、教えていただきたいです。

Answer 1

見たところCSSには問題がないと思います。
ちゃんとどれも3行目に「…」が付いてます。
どんどん上がってくるというのはHiro14さんの環境では上から3行目→2行目→1行目ってなるってことですよね？
自分のところでは再現しません…

それとは別にこちらのheightは不要です。これがあると高さが取られて3行以上表示されてしまうので。
残す場合はハックなどでchromeで見た場合height:auto;になるように指定が必要です。

.list-info .title {
	font-size: 3.8vw;
	font-weight: 600;
	margin-top: 0.8vh;
	margin-bottom: 0.3vh;
	color: #463a1c;
	overflow: hidden;
/*	height: 4.5em; 不要です */
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

###追記

.list-info .title {
    font-size: 3.8vw;
    font-weight: 600;
    margin-top: 0.8vh;
    margin-bottom: 0.3vh;
    color: #463a1c;
    overflow: hidden;
    height: 4.5em;
    width: 100%;
}

chrome以外はここまで。

.list-info .title {
    font-size: 3.8vw;
    font-weight: 600;
    margin-top: 0.8vh;
    margin-bottom: 0.3vh;
    color: #463a1c;
    overflow: hidden;
    height: 4.5em;
    width: 100%;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: auto;
}

line-clampが有効なchromeはheight: auto;に書き換える。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
私のブラウザではこのように見えるという画像を質問に追加したのですが、このように見えてしまうのは私のブラウザに問題があるということなのでしょうか？

また、heightについては、line-clampが使えないブラウザがあり、そういった場合に4行目、5行目まで表示されてしまうとかなりデザインが崩れてしまうので意図的に付け加えたものなのですが、そういったことを考慮する場合はどうすればよいのでしょうか？

[gin]

jsfiddleでもそう見えます？？
私のほうではすべて3行目に「…」ついてます。
ちなみにWin7のchromeです。

heightについては書いたようにheightはそのままにして新たにハックでchrome用にheight:auto;で上書きですね。
ちなみにですが、これも私のところでは画像のように3行綺麗に見えてるわけではなく5行目が上半分切れた状態で見えています。heightが4.5文字なので当然と言えば当然ですが…＜jsfiddle

[gin]

あとはJSを使用するか、こういうやり方もあります。
これは3行なり4行なりのheightを指定し、そのボックスの右下に:afterで「…」を表示させるってやつです。

http://codepen.io/skwbr/pen/zqQwVZ

[退会済みユーザー]

jsfiddleのスクリーンショットが質問箇所に添付したものになります。
私の状況はkatoyさんが上で説明してくださっている通りで、表示エリアを広げると期待通りの表示が確認できました。
こちら、何らかの属性の影響ということは考えられるでしょうか？
一度表示範囲を広げ、期待通りの表示になってからは狭めても元に戻ってしまうことはありません。

ちなみにこれはモバイル用で、PCサイトは別で作るので、ハックするとすればOpera Miniだけやるという認識であっているでしょうか？
（以下がline-clampのブラウザ対応表です）

http://caniuse.com/#search=line-clamp

ginさんの作られたやつすごいですね。いろいろ調べたのですがこんなやり方目にすることなかったです！！
できればSCSSを使わずにCSSでやりたいと思っているので、表示崩れが問題ないのであれば、もともと私が調べたコードでいきたいですが、大変勉強になりました。

[退会済みユーザー]

なぜだかはわかりませんが、自分でいろいろ属性を消していたら「.list-info .title」のmargin-top: 0.8vh;とmargin-bottom: 0.3vh;の二つを消したら私のブラウザでも期待通りに表示することができました！！

[gin]

いや、私が作ったやつじゃないですｗ
後ろや前に何かくっつけるのはよくやるのでそれをキーに探しただけっすー
というかchromeでも環境によって見え方違うっぽいので別のやり方の方がいいような気がします…
ハックはかけるならchromeにですよ～

[退会済みユーザー]

これはモバイル専用のデザインでChrome for Androidは対応ってなってますけど、対応していない古いのがあるということですか？

そうなのですか。まだ勉強したての初心者なので、探し方も下手なのかもしれません。。

[gin]

対応だからそこにハックをかけるんですよ～
赤いのは対応していないので通常に「height: 4.5em;」を書きます。
緑のは対応しているのでハックして通常のheightを上書きするので「height: auto;」を書きます。

[gin]

追記しておきましたー

[退会済みユーザー]

本当に全然わかっていなくてすいません。。
モバイルなら全部（Opera Mini以外）対応しているという認識で、（Opera Miniを無視する場合）Chromeとかわけてハックする必要ないと思っているのですが違いますか？

[gin]

あ！！
こちらこそすみません「PCサイトは別で作る」を見逃してました…^^;
Opera Miniはほぼ無視できるレベルだと思うのでハックも何もいらないかもです。

[退会済みユーザー]

ならよかったです！
実はCSSのハックという言葉もginさんから始めて聞いて調べて知ったので、自分の理解が間違っているのではないかとちょっと心配でした。

いつもご丁寧にいろいろと教えてくださりありがとうございます！！

[退会済みユーザー]

あ、すいません最後に一点確認させてください。
height: auto;はあってもなくても変わらないんですよね？
（追記いただいたChrome用のCSSにわざわざ記述がありましたので）

[gin]

「height: auto;」は「height: 4.5em;」を上書きするためのものですね。
今回ほぼほぼ「line-clamp」が効くようなので「height: 4.5em;」は不要。
なので「height: auto;」も不要です～＜他に指定がなれけばデフォがautoなので

[退会済みユーザー]

なるほど、そのためでしたか！
最後までありがとうございました。

Answer 2

私の環境では、
JSFiddle での表示直後は、質問にあるような表示になります。しかし、表示エリアを少し広くすると、 "..." の位置が意図したように変化します。
どの属性の影響でこのような動作になるかは、私にはわかりませんが...

Comments

[gin]

見た目の行数も3行ですね～
フォントが大きいのかな。
うちは「JavaScript methods are the actions that can be performed on objects. A JavaScript method i…」ここでリーダがでます。

[退会済みユーザー]

ありがとうござます。

私もkatoyさんのご回答を見て試していましたが、全く同じ状況でした。
やはりこれはなんらかの属性が影響してしまっていると考えるのが妥当なのでしょうか？
だとしたら地道に検証してみるしかないですね。。

[退会済みユーザー]

なぜだかはわかりませんが、自分でいろいろ属性を消していたら「.list-info .title」のmargin-top: 0.8vh;とmargin-bottom: 0.3vh;の二つを消したら私のブラウザでも期待通りに表示することができました！！