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

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

ただいまの
回答率

90.50%

  • JavaScript

    20440questions

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

  • HTML

    11521questions

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

  • jQuery

    8168questions

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

  • CSS

    7561questions

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

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

解決済

回答 6

投稿

  • 評価
  • クリップ 5
  • VIEW 5,144

hatoQ

score 35

前提・実現したいこと

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

https://teratail.com/questions/38076
を参考に、エリア末尾に::after要素で目隠しをほどこし、
content:"..."で「...」を与えてやっています。

が、文字数を計っているわけではないので、
テキストが長かろうが短かろうが、エリアが余っていようが満タンになっていようが、
常に「...」が表示されている状態です。

これをエリアに対する文字量で出しわけできないかと考えています。

発生している問題・エラーメッセージ

レスポンシブなので、横幅を小さくすると、当然テキストエリアも小さくなる。
その場合は::after要素の「...」がイキイキととても活躍している。

が、逆にウィンドウを大きくすると、広々としたテキストエリアに対して
テキスト量は十分に収まっているにも関わらず、
申し訳なさそうに右端に「...」が鎮座しているという状況。

該当のソースコード

<div class="newsBox cf">
    <dl><!--ここからニュース1件-->
        <dt>
            <h6>新着情報</h6>
            <img src="images/news.jpg" alt="news">
        </dt>
        <dd>
            <p class="newsDate">2016年6月66日</p>
            <p class="newsTitle">ニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキスト</p>
            <p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <div class="more">
                <a href="newsdetail.html">詳しく見る</a>
            </div>
        </dd>
    </dl>
    <dl><!--ここからニュース1件-->
        <dt>
            <h6>新着情報</h6>
            <img src="images/news.jpg" alt="news">
        </dt>
        <dd>
            <p class="newsDate">2016年6月66日</p>
            <p class="newsTitle">ニュースタイトルテキスト<br>ニュースタイトルテキストテキスト</p>
            <p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <div class="more">
                <a href="newsdetail.html">詳しく見る</a>
            </div>
        </dd>
    </dl>
    <!--以下、ニュースdlが続きます。-->
</div>
/*newsBox*/
.newsBox { width: 100%; margin-bottom: 40px; overflow: hidden;}
.newsBox dl { float: left; width: 47.5%; margin: 0 5% 40px 0;}
.newsBox dl:nth-child(even) { margin-right: 0;}
.newsBox dl dt { position: relative; display: block; width: 100px; height: auto; min-height: 110px;}
.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;}
.newsBox dl dt img { position: absolute; top: 0; left: 0; width: 100%; height: auto;}
.newsBox dl dd { width: 100%; background: rgba(228,198,124,0.1); padding: 40px 20px; text-align: left;}
.newsBox dl dd .newsDate { font-size: 16px; line-height: 1; margin-bottom: 40px; color: #997726;}
.newsBox dl dd .newsTitle { position: relative; height: 5.5rem;/*3行分*/ font-size: 22px; line-height: 30px; margin-bottom: 30px; overflow: hidden;}
/*★A*/
.newsBox dl dd .newsTitle::after { content: "..."; display: inline-block; position: absolute; top: 63px; right: 0; width: 70px; height: 24px; text-align: right;
    background: -moz-linear-gradient(left,  rgba(252,249,242,0) 0%, rgba(252,249,242,1) 50%, rgba(252,249,242,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(252,249,242,0) 0%,rgba(252,249,242,1) 50%,rgba(252,249,242,1) 100%);
    background: linear-gradient(to right,  rgba(252,249,242,0) 0%,rgba(252,249,242,1) 50%,rgba(252,249,242,1) 100%);
}
/*★B*/
.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;}
.newsBox dl dd .more { width: 65%; height: 60px; line-height: 60px; text-align: center; margin: 0 auto; border: 1px solid #997726;}

試したこと

最初、★Bのように-webkit-box; -webkit-box-orient:と-webkit-line-clamp: 3;で複数行の三点リーダを実装しようと考えた。
→けれど現状webkit系のブラウザにしか対応していないという...!

そこで★Aの目隠し+「...」作戦を敢行。
→可変するテキストエリアのサイズと文字量に応じて表示をコントロールしたい...!

なんとなくjQueryで文字数をカントしてどうこうできそうな気もするのですが、、
var count = $(this).val().length;//←こんな感じのやつ
具体的に何をどうしたらいいのかわかりません。
文字数の制限はPHPが簡単らしいのですが、PHPはまったくわからないので手が出せません。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 6

checkベストアンサー

+2

これはどうですか?

<div>ニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトル</div>
div {
  position: relative;
  width: 20em;
  max-height: 4.2em;
  line-height: 1.4;
  overflow: hidden;
  background-color: #fff;
}
div:before,
div:after {
  background-color: #fff;
}
div:before {
  content: '...';
  position: absolute;
  top: 2.8em;
  right: 0;
  padding: 0 0.1em;
}
div:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/09 17:09

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

    キャンセル

  • 2016/08/09 18:34

    同じく擬似要素を使ってやってますが、

    :beforeで「...」を表示
    文字が指定の行を超えなければ、:afterで:beforeの「...」を隠す

    というところが、★Aとの違いです。

    ただ、この方法だと幅によっては文字がはみ出します。。。

    サンプル
    http://output.jsbin.com/caneyoziko/1

    YoutubeをFirefoxでみると、動画タイトルを同じ感じで省略してるので、
    こちらも参考にしてみるといいかもしれません。

    キャンセル

  • 2016/08/10 22:17

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

    キャンセル

  • 2016/08/27 10:26

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

    キャンセル

+2

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

text-overflow: ellipsis;

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/07 21:49

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

    キャンセル

  • 2016/08/07 22:13

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/09 17:05

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

    キャンセル

+1

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

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

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

$text = '表示させる文章';
$text = trimChara($text, 100, true);
function trimChara($text, $trimLength, $reader = 'false') {
    $text = str_replace(']]>', ']]>', $text);
    $text = strip_tags($text);
    $chara = mb_substr($text, 0, $trimLength);
    if (mb_strlen($text) > $trimLength) {
    $chara = trim($chara, " ");
    if ($reader == 'true') {
      $text = $chara . '...';
    } else {
      $text = $chara;
    }
    }
    return $text;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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/08 12:24

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

    キャンセル

  • 2016/08/09 11:54

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

    キャンセル

0

 jQueryを利用した文字省略

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

<!-- jQuery読込 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<!-- 省略したいテキスト -->
<div class="newsBox cf">
    <dl><!--ここからニュース1件-->
        <dt>
            <h6>新着情報</h6>
            <img src="images/news.jpg" alt="news">
        </dt>
        <dd>
            <p class="newsDate">2016年6月66日</p>
            <p class="newsTitle">ニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキスト</p>
            <p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <div class="more">
                <a href="newsdetail.html">詳しく見る</a>
            </div>
        </dd>
    </dl>
    <dl><!--ここからニュース1件-->
        <dt>
            <h6>新着情報</h6>
            <img src="images/news.jpg" alt="news">
        </dt>
        <dd>
            <p class="newsDate">2016年6月66日</p>
            <p class="newsTitle">ニュースタイトルテキスト<br>ニュースタイトルテキストテキスト</p>
            <p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <div class="more">
                <a href="newsdetail.html">詳しく見る</a>
            </div>
        </dd>
    </dl>
    <!--以下、ニュースdlが続きます。-->
</div>


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

$(document).ready(function() {
  var breakPoint = 1024; //この幅以下の場合のみ実行
  if ($(window).width() < breakPoint) {

    // ↓ 省略を適用したいクラス名を指定
    $(".newsTxt").each(function() {
      var count = 50; //任意の文字数を設定
      var txt = $(this).text();
      if (txt.length > count) {
        txt = txt.substr(0, count);
        $(this).text(txt + "...");
      }
    });

  }
});


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/10 22:10

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20440questions

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

  • HTML

    11521questions

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

  • jQuery

    8168questions

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

  • CSS

    7561questions

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