CSSを使用してテキストの長さをn行に制限する

Question

CSSを使用してテキストの長さを "n"行に制限することは可能ですか（または垂直方向にオーバーフローしたときに切り取ることも可能です）。

text-overflow: Ellipsis;は1行のテキストに対してのみ機能します。

原文：

Ultrices natoque mus mattis、aliquam、ペレンテスクのクラ
tincidunt elit purus lectus、ベルアリエット、エレメンツヌンク
ヌンクロンカス前に座って！陰茎陰茎
mus tincidunt！ Dapibus sed aenean、magna sagittis、Lorem Velit

欲しい出力（2行）：

Ultrices natoque mus mattis、aliquam、ペレンテスクのクラ
tincidunt elit purus lectus、ヴェリットaliquet、エレメンツ...

Answer 1

方法はありますが、Webキットのみです。ただし、これをline-height: X;およびmax-height: X*N;と組み合わせると、省略記号なしで他のブラウザでも機能します。

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: Ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

デモ： http://jsfiddle.net/csYjC/1131/ /

Answer 2

できることは次のとおりです。

.max-lines {
  display: block; /* or inline-block */
  text-overflow: Ellipsis;
  Word-wrap: break-Word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

ここで、emのmax-height: = line-height:×<number-of-lines>。

Answer 3

クロスブラウザによる解決策

この問題は何年も私たちを悩ませてきました...

すべての場合に役立つように、私はCSSのみのアプローチ、およびcssの警告が問題となる場合のjQueryアプローチをレイアウトしました。

これが CSSのみ の解決策です。これはあらゆる状況で機能しますが、いくつかの小さな注意点があります。

基本は簡単で、スパンのオーバーフローを隠し、Eugene Xaが示唆しているように行の高さに基づいて最大の高さを設定します。

それから、省略記号をうまく配置するdivを含む擬似クラスがあります。

警告

このソリューションでは、必要があるかどうかに関係なく、常に省略記号を使用します。

最後の行が終わりの文で終わっていると、4つのドットになってしまいます。

正当なテキストの配置に満足する必要があります。

省略記号は、テキストの右側に表示されます。

コード+スニペット

jsfiddle

.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  Word-wrap: break-Word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.Ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */

<div class="text Ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

jQueryのアプローチ

私の意見ではこれが最良の解決策ですが、誰もがJSを使用できるわけではありません。基本的に、jQueryはあらゆる.text要素をチェックし、事前設定されたmax varよりも多くの文字数がある場合、残りを切り捨てて省略記号を追加します。

このアプローチには注意点がありませんが、このコード例は基本的な考え方を説明するためのものです。2つの理由から、これを改善せずに本番で使用することはありません。

1）.text elemsの内側のHTMLを書き換えます。必要かどうか2）内側のHTMLにネストされた要素がないことを確認するためのテストは行われません - そのため、.textを正しく使用するには作者に大きく依存しています。

編集済み

キャッチしてくれてありがとう@markzzz

コードとスニペット

jsfiddle

setTimeout(function()
{
        var max = 200;
  var tot, str;
  $('.text').each(function() {
        str = String($(this).html());
        tot = str.length;
    str = (tot <= max)
        ? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.

.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an Ellipsis -->

Answer 4

私の知る限りでは、これはheight: (some em value); overflow: hiddenを使用することによってのみ可能であり、それでもそれは最後に空想の...を持っていないでしょう。

それが選択肢にならないのであれば、サーバーサイドでの前処理（テキストフローを確実に予測することは不可能であるため困難）やjQuery（可能ではあるがおそらく複雑）がなければ不可能です。

Answer 5

このスレッド からの解決策はjqueryプラグインを使うことです - dotdotdot 。 CSSソリューションではありませんが、「もっと読む」リンク、動的なサイズ変更などのオプションがたくさんあります。

Answer 6

次のCSSクラスは、2行の省略符号を取得するのに役立ちました。

  .two-line-Ellipsis {
        padding-left:2vw;
        text-overflow: Ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }

Answer 7

現在はできませんが、将来的にはtext-overflow:ellipis-lastlineを使用できるようになります。現在はOpera 10.60以降でベンダの接頭辞が付いています： example

Answer 8

私はうまくいく解決策を持っていますが、その代わりに省略記号ではグラデーションを使います。動的テキストがある場合には機能するので、楕円が必要な長さになるかどうかはわかりません。利点は、JavaScriptの計算をする必要がなく、テーブルセルを含む可変幅のコンテナでも機能し、クロスブラウザであることです。それはいくつかの余分なdivを使いますが、それは実装するのがとても簡単です。

マークアップ：

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS：

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    Word-wrap: break-Word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

ブログ投稿： http://salzerdesign.com/blog/?p=453

サンプルページ： http://salzerdesign.com/test/fade.html

Answer 9

私は本当にラインクランプが好きですが、まだFirefoxのサポートはありません..だから私は数学の計算で行き、オーバーフローを隠します

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

リンク付きのjQueryを介してこのクラスを削除して追加したいとしましょう。最大の高さは63ピクセルになるので、追加のピクセルが必要になります。 62pxですが、4行の場合はfalseが真になるので、追加のピクセルでこれを修正しても問題ありません。

私はこれを例にするためにコーヒースクリプトを貼り付けます。デフォルトでは隠されているリンクをいくつか使用します。read-moreクラスとread-lessクラスで、オーバーフローが不要なリンクを削除し、本体を削除しますオーバーフロークラス

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()

Answer 10

あなたがそのようにすることができるそれぞれのletterに焦点を当てたいのであれば、私は this questionを参照してください。

function truncate(source, size) {
  return source.length > size ? source.slice(0, size - 1) + "…" : source;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

あなたがそれぞれのWordに注目したいのなら、そのようにすることができます+スペース

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        title.split(' ').reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.Push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join(' ') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

それぞれのWordに注目したいのなら、スペースなしでそのようにすることができます。

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        Array.prototype.slice.call(title).reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.Push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join('') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

Answer 11

基本的な例のコード、コードを学ぶことは簡単です。スタイルCSSのコメントを確認してください。

table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: Ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>