###前提・実現したいこと
複数行で文末に「...」を実装したい。
レスポンシブで横幅が可変します。
縦幅は固定で指定しました。
https://teratail.com/questions/38076
を参考に、エリア末尾に::after要素で目隠しをほどこし、
content:"..."で「...」を与えてやっています。
が、文字数を計っているわけではないので、
テキストが長かろうが短かろうが、エリアが余っていようが満タンになっていようが、
常に「...」が表示されている状態です。
これをエリアに対する文字量で出しわけできないかと考えています。
###発生している問題・エラーメッセージ
レスポンシブなので、横幅を小さくすると、当然テキストエリアも小さくなる。
その場合は::after要素の「...」がイキイキととても活躍している。
が、逆にウィンドウを大きくすると、広々としたテキストエリアに対して
テキスト量は十分に収まっているにも関わらず、
申し訳なさそうに右端に「...」が鎮座しているという状況。
###該当のソースコード
HTML
1<div class="newsBox cf"> 2 <dl><!--ここからニュース1件--> 3 <dt> 4 <h6>新着情報</h6> 5 <img src="images/news.jpg" alt="news"> 6 </dt> 7 <dd> 8 <p class="newsDate">2016年6月66日</p> 9 <p class="newsTitle">ニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキスト</p> 10 <p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 11 <div class="more"> 12 <a href="newsdetail.html">詳しく見る</a> 13 </div> 14 </dd> 15 </dl> 16 <dl><!--ここからニュース1件--> 17 <dt> 18 <h6>新着情報</h6> 19 <img src="images/news.jpg" alt="news"> 20 </dt> 21 <dd> 22 <p class="newsDate">2016年6月66日</p> 23 <p class="newsTitle">ニュースタイトルテキスト<br>ニュースタイトルテキストテキスト</p> 24 <p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 25 <div class="more"> 26 <a href="newsdetail.html">詳しく見る</a> 27 </div> 28 </dd> 29 </dl> 30 <!--以下、ニュースdlが続きます。--> 31</div> 32
CSS
1/*newsBox*/ 2.newsBox { width: 100%; margin-bottom: 40px; overflow: hidden;} 3.newsBox dl { float: left; width: 47.5%; margin: 0 5% 40px 0;} 4.newsBox dl:nth-child(even) { margin-right: 0;} 5.newsBox dl dt { position: relative; display: block; width: 100px; height: auto; min-height: 110px;} 6.newsBox dl dt h6 { position: absolute; left: 0; top: 0; width: 100px; height: 40px; line-height: 40px; text-align: center; background-color: rgba(169, 146, 92, 1); font-size: 16px; color: #fff;} 7.newsBox dl dt img { position: absolute; top: 0; left: 0; width: 100%; height: auto;} 8.newsBox dl dd { width: 100%; background: rgba(228,198,124,0.1); padding: 40px 20px; text-align: left;} 9.newsBox dl dd .newsDate { font-size: 16px; line-height: 1; margin-bottom: 40px; color: #997726;} 10.newsBox dl dd .newsTitle { position: relative; height: 5.5rem;/*3行分*/ font-size: 22px; line-height: 30px; margin-bottom: 30px; overflow: hidden;} 11/*★A*/ 12.newsBox dl dd .newsTitle::after { content: "..."; display: inline-block; position: absolute; top: 63px; right: 0; width: 70px; height: 24px; text-align: right; 13 background: -moz-linear-gradient(left, rgba(252,249,242,0) 0%, rgba(252,249,242,1) 50%, rgba(252,249,242,1) 100%); 14 background: -webkit-linear-gradient(left, rgba(252,249,242,0) 0%,rgba(252,249,242,1) 50%,rgba(252,249,242,1) 100%); 15 background: linear-gradient(to right, rgba(252,249,242,0) 0%,rgba(252,249,242,1) 50%,rgba(252,249,242,1) 100%); 16} 17/*★B*/ 18.newsBox dl dd .newsTxt { height: 5rem;/*3行分*/ font-size: 16px; margin-bottom: 30px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} 19.newsBox dl dd .more { width: 65%; height: 60px; line-height: 60px; text-align: center; margin: 0 auto; border: 1px solid #997726;} 20
###試したこと
最初、★Bのように-webkit-box; -webkit-box-orient:と-webkit-line-clamp: 3;で複数行の三点リーダを実装しようと考えた。
→けれど現状webkit系のブラウザにしか対応していないという...!
そこで★Aの目隠し+「...」作戦を敢行。
→可変するテキストエリアのサイズと文字量に応じて表示をコントロールしたい...!
なんとなくjQueryで文字数をカントしてどうこうできそうな気もするのですが、、
var count = $(this).val().length;//←こんな感じのやつ
具体的に何をどうしたらいいのかわかりません。
文字数の制限はPHPが簡単らしいのですが、PHPはまったくわからないので手が出せません。
どうにかなるのかかならないのか、なるとすれば具体的にどうすればいいのか、
どなたかご教授をお願いします...!
回答6件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/09 08:09
2016/08/09 09:34
2016/08/10 13:17
2016/08/27 01:26