cssで複数行の文字列を省略して末尾を三点リーダーにした後、別のテキストを続ける

スマホサイトを制作しています。

動的に取ってきたテキストを長い場合は
省略して三点リーダーで表示させていと思っています。

参考：https://qiita.com/yoshida-hi/items/055c36e015f0bf8fe4f6

p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
　　 overflow: hidden;
  }

この部分を使用すれば省略可能ですが、
省略したテキストの後ろに、別のテキストを続けたいと思っています。
省略するテキストは、省略させる文字数に満たない場合もあります。

<div>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>//3行で省略させたいテキスト
  <span>の情報一覧</span>//続けたいテキスト
</div>

pタグ内のテキストが短い場合はspanタグ以下をpタグテキストの後ろに表示させたいです。
しかしこの場合、pタグに「display: -webkit-box;」を使用しているため、
spanの前で改行されてしまいます。

理想的なブラウザでの表示
【省略しない】
テキストテキストの情報一覧

【省略する】
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキス…
の情報一覧

省略するしないに関わらず、
spanタグをpタグに続けることは可能でしょうか？

何か良案がありましたら、ご教授頂けますと幸いです。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1div {
2    display: flex;
3    align-items: flex-end;
4    flex-wrap: wrap;
5    max-width: 16em;
6}
7
8p {
9    display: -webkit-box;
10    -webkit-box-orient: vertical;
11    -webkit-line-clamp: 3;
12    overflow: hidden;
13    max-width: inherit;
14    margin: 0;
15}

投稿2018/02/14 06:00

x_x

総合スコア13749

pololo

2018/02/15 00:56

ご回答いただきありがとうございます！希望通りの動きに近いと思います！ただ一点、max-width: 16em;と指定されていると思いますが、横幅が大きいスマホで確認しますと、左に余白が空いてしまうのですが、何か対処法はありますでしょうか？ iphone4のサイズでは大丈夫でした。

x_x

2018/02/15 01:01

提示された文字数で確認できるくらいにしただけです。現状の幅はどうなっているのでしょうか？

pololo

2018/02/15 01:21

返答ありがとうございます。質問部分に現状のキャプチャを載せました。キャプチャのデバイスはiPhone6plusです。おそらく右の余白は112px程空いています。よろしくお願いします。

x_x

2018/02/15 01:40

とくに指定がないということでしょうか？その場合はなくても(max-width: none;)かまいません。もちろん三行に満たない場合は省略されません。

pololo

2018/02/15 02:07

ご回答、ありがとうございます。特に横幅の指定はありません。 max-width: none;を指定することで、どの端末でも余白がなくなりました。質問での説明不足で大変申し訳ないのですが、たまに２行目の途中でテキストが終わってしまうこともあり、そういった場合、後のspanタグのテキストを続けることは難しいでしょうか？ <p>テキストテキストテキストテキスト//１行目テキスト</p><span>の情報一覧</span>//２行目の途中でテキストが終わってしまう申し訳ございませんが、ご教授頂けますと幸いです。よろしくお願いいたします。

x_x

2018/02/15 03:28

考えてはみますが、p内にspanを入れなければならず、難しいかもしれません。

pololo

2018/02/15 04:03

すみません、、ありがとうございます

x_x

2018/02/16 09:13

いろいろと考えてみたものの、すみませんが完全に希望に沿うものはできそうになかったです。 JavaScriptでgetComputedStyle()を使って高さを取得し、一定以下ならinlineにするという手はありますが、高さの閾値をどうするかという問題が残ります。ちなみに、display: -webkit-boxや-webkit-line-clampはFlexboxの過渡期仕様を利用したものなので、いつか使えなくなる可能性があると思われます。最大行数はmax-linesで指定することになりそうですね。 https://drafts.csswg.org/css-overflow/#max-lines

pololo

2018/02/16 09:32

考えていただき、誠にありがとうございます！難しそうですね。。 display: -webkit-boxや-webkit-line-clampについてもご教授いただき助かります！色々と勉強になります。 cssだけで対処することは今回は断念しようと思います。ご回答いただきありがとうございました！

行動規範の内容に同意します