質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

6回答

9792閲覧

複数行で文末に「...」を実装したい(テキストエリア可変アリ)

hatoQ

総合スコア45

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

6クリップ

投稿2016/08/07 08:35

###前提・実現したいこと
複数行で文末に「...」を実装したい。
レスポンシブで横幅が可変します。
縦幅は固定で指定しました。

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はまったくわからないので手が出せません。

どうにかなるのかかならないのか、なるとすれば具体的にどうすればいいのか、
どなたかご教授をお願いします...!

ikuwow👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

ベストアンサー

これはどうですか?

html

1<div>ニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトル</div>

css

1div { 2 position: relative; 3 width: 20em; 4 max-height: 4.2em; 5 line-height: 1.4; 6 overflow: hidden; 7 background-color: #fff; 8} 9div:before, 10div:after { 11 background-color: #fff; 12} 13div:before { 14 content: '...'; 15 position: absolute; 16 top: 2.8em; 17 right: 0; 18 padding: 0 0.1em; 19} 20div:after { 21 content: ''; 22 width: 100%; 23 height: 100%; 24 position: absolute; 25}

投稿2016/08/09 04:54

shnk

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatoQ

2016/08/09 08:09

ご回答ありがとうございます! こちらは残念ながら基本的に現状と同じですね。 擬似要素で目隠しして「...」を与えてやるという考え方です。
shnk

2016/08/09 09:34

同じく擬似要素を使ってやってますが、 :beforeで「...」を表示 文字が指定の行を超えなければ、:afterで:beforeの「...」を隠す というところが、★Aとの違いです。 ただ、この方法だと幅によっては文字がはみ出します。。。 サンプル http://output.jsbin.com/caneyoziko/1 YoutubeをFirefoxでみると、動画タイトルを同じ感じで省略してるので、 こちらも参考にしてみるといいかもしれません。
hatoQ

2016/08/10 13:17

なるほど!すみません、全然気が付きませんでした!すごい!! :afterがなんでそんな都合よく働いてくれるのか CSSをパッと見てちょっとまだ理解できないんですが、 一度試してみます!ありがとうございました!
hatoQ

2016/08/27 01:26

たくさんアイディアを頂いた中で、今回のケースではこちらが一番シンプルで求める形に近いということでベストアンサーにさせて頂きます! どれもかなり使える方法なので、これから「・・・」で困ったときは、ケースバイケースで活用していきたいと思います。 皆さんありがとうございました!
guest

0

https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow

css

1text-overflow: ellipsis;

はどうですか
自動でやってくれますよ

投稿2016/08/07 12:03

lazex

総合スコア604

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatoQ

2016/08/07 12:49

残念ながらtext-overflow: ellipsis;は複数行には対応していないので困っています。 一行なら問題なかったんですけど...
lazex

2016/08/07 13:13

複数行なら自力でやるしかないですね ただ面倒なのでkei344さんが提示してくれてるようなライブラリで問題なく動くなら使ったほうがいいと思います
guest

0

CSSやJavaScriptライブラリ等で私も以前にやろうとしましたが、頓挫して結局PHPで実装したことがあります。

下記、全角に対応しているか等、今回用に特に検証していないので責任は取れませんが、よろしければ参考にされてください。

表示させる文字列が入っている変数に対して下記関数を噛ますことで、指定文字数を超えた場合に...をつける仕様です。
(表示させる文字列内にHTMLタグが入る場合はコードは変えなくてはなりませんが)

PHP

1$text = '表示させる文章'; 2$text = trimChara($text, 100, true);

PHP

1function trimChara($text, $trimLength, $reader = 'false') { 2 $text = str_replace(']]>', ']]>', $text); 3 $text = strip_tags($text); 4 $chara = mb_substr($text, 0, $trimLength); 5 if (mb_strlen($text) > $trimLength) { 6 $chara = trim($chara, " "); 7 if ($reader == 'true') { 8 $text = $chara . '...'; 9 } else { 10 $text = $chara; 11 } 12 } 13 return $text; 14}

投稿2016/08/09 05:51

qasev

総合スコア60

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

http://jrvis.com/trunk8/
上なんかいかがでしょうか。私もレスポンシブで制作した際に利用させていただきました。
注意点としては、コーディングを終えてからコレを組み込むと横並びの手法やoverflowの関係で上手く表現できないことがあったので、初期段階で導入して壊れないよう組んでいくと上手くできます。

投稿2016/08/09 03:45

ponchan

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatoQ

2016/08/09 08:05

ありがとうございます! こちらのプラグインはすでに試してみました。 そして上手くいかなかったですw 全部組み上げてから試してみたんですが、最初から導入していないと崩れるんですね、知りませんでした~ 次回はまず最初に試してみることにします!
guest

0

jQueryを利用した文字省略

該当のソースコードに挙げられているCSSよりは短く記述可能だと思います。

html

1<!-- jQuery読込 --> 2<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 3 4 5<!-- 省略したいテキスト --> 6<div class="newsBox cf"> 7 <dl><!--ここからニュース1件--> 8 <dt> 9 <h6>新着情報</h6> 10 <img src="images/news.jpg" alt="news"> 11 </dt> 12 <dd> 13 <p class="newsDate">2016年6月66日</p> 14 <p class="newsTitle">ニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキスト</p> 15 <p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 16 <div class="more"> 17 <a href="newsdetail.html">詳しく見る</a> 18 </div> 19 </dd> 20 </dl> 21 <dl><!--ここからニュース1件--> 22 <dt> 23 <h6>新着情報</h6> 24 <img src="images/news.jpg" alt="news"> 25 </dt> 26 <dd> 27 <p class="newsDate">2016年6月66日</p> 28 <p class="newsTitle">ニュースタイトルテキスト<br>ニュースタイトルテキストテキスト</p> 29 <p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 30 <div class="more"> 31 <a href="newsdetail.html">詳しく見る</a> 32 </div> 33 </dd> 34 </dl> 35 <!--以下、ニュースdlが続きます。--> 36</div>

↑jQuery読込部分以外は質問に挙げられていたコードのままです。

js

1$(document).ready(function() { 2 var breakPoint = 1024; //この幅以下の場合のみ実行 3 if ($(window).width() < breakPoint) { 4 5 // ↓ 省略を適用したいクラス名を指定 6 $(".newsTxt").each(function() { 7 var count = 50; //任意の文字数を設定 8 var txt = $(this).text(); 9 if (txt.length > count) { 10 txt = txt.substr(0, count); 11 $(this).text(txt + "..."); 12 } 13 }); 14 15 } 16});

画面が大きい時に気になるとのことでしたので、
var breakPoint = 1024;の部分で実行するウィンドウ最大幅を指定可能にしてみました。

投稿2016/08/09 07:43

maru0014

総合スコア151

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatoQ

2016/08/10 13:10

なるほど!こういう考え方もありますね! 今回は文字数で制限ができないのですが、 「横幅がXpx以上の場合は目隠し要素を非表示」とかにしたら使えそうです! それにしてもjsって上手な人が書くとこんなにコンパクトになるんですね…勉強になります! 一度試してみます!ありがとうございましたー
guest

0

jQueryのライブラリでいくつかそういうものがあるようです。

【枠のサイズに応じてテキストを自動省略できる「Jquery-quickfit」:phpspot開発日誌】
http://phpspot.org/blog/archives/2016/02/jqueryquickfit.html

【要素内のテキストをはみ出さず、JSで「...」で省略してくれる「jQuery.dotdotdot」:phpspot開発日誌】
http://phpspot.org/blog/archives/2014/12/jsjquerydotdotd.html


追記:

日本語は難しいですね・・・。

【jTruncSubstr [jGlycy]】
http://semooh.jp/jglycy/jquery-plugins/jtruncsubstr

【【jQuery】長い文章を省略して表示する | Tips Note by TAM】
http://www.tam-tam.co.jp/tipsnote/javascript/post4191.html

【文字列を省略して「…」を付与する方法 – CSS/jQuery | Developers.IO】
http://dev.classmethod.jp/ria/string-replace-css-and-jquery/

投稿2016/08/07 13:01

編集2016/08/08 04:28
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatoQ

2016/08/08 03:24

dotdotdotは日本語に対応していないみたいです。 テキストエリアのサイズとは関係のない所で「...」が挿入されてしまいます。 すごく簡単で便利なだけに残念! 調べたところver1.6.X~は日本語対応しているという情報もあったんですが、ダメでした。 quickfitも同様、こちらの想定通りに動きませんでした。
hatoQ

2016/08/09 02:54

続けてのご回答ありがとうございます! なるほど、文字数で制限するプラグインは日本語でもあるんですね。 jTruncSubstr を使ってみましたが、使い方も簡単で便利でした。 ただ、レスポンシブなので、結局文字数で制限するのは無理だという結果に。 今回は実装をあきらめ、現状のまま常に「...」が表示されている状態でいくことにしました。 次回、文字数で制限する場面では活用してみたいと思います。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問