複数行テキストへの省略記号の適用

Question

流動性の高さ（20％）でdivの内側の最後の行に省略記号を追加する解決策はありますか？

私はCSSで-webkit-line-clamp関数を見つけました、しかし私の場合、行数はウィンドウサイズに依存するでしょう。

p {
    width:100%;
    height:20%;
    background:red;
    position:absolute;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>

このJSFiddleを使って問題を説明します。 https://jsfiddle.net/96knodm6/

Answer 1

私は最終的に私がしたいことをするための解決策を見つけました。 p段落として、articleラッパーとして。 pの高さ（ウィンドウの高さにも依存）に応じてarticleに省略記号を適用する場合は、heightのarticle、line-heightを取得する必要があります。 pとarticleHeight/lineHeightを使用して、動的に追加できるline-clampの数を見つけます。

唯一のものは、CSSファイルでline-heightを宣言する必要があることです。

次のコードを確認してください。ウィンドウの高さを変更すると、line-clampも変更されます。そのためのプラグインを作成するのは素晴らしいことです。

jsfiddle

function lineclamp() {
  var lineheight = parseFloat($('p').css('line-height'));
  var articleheight = $('article').height(); 
  var calc = parseInt(articleheight/lineheight);
  $("p").css({"-webkit-line-clamp": "" + calc + ""});
}


$(document).ready(function() {
    lineclamp();
});

$( window ).resize(function() {
        lineclamp();
});

article {
  height:60%;
  background:red;
  position:absolute;
}

p {
  margin:0;
  line-height:120%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: Ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>

Answer 2

省略記号（...）をの単一行のテキストに適用する場合は、 text-overflow プロパティを使用すると、CSSによって多少簡単になります。それはまだ少し注意が必要です（すべての要件のため - 下記参照）、しかしtext-overflowはそれを可能にしそして信頼できるものにします。

しかし、ここでそうであるように複数行テキストで省略符号を使用したいのであれば、何もお楽しみにならないでください。 CSSにはこれを行うための標準的な方法がなく、回避策がありません。

単一行テキストの省略記号

text-overflowを使用すると、省略記号を1行のテキストに適用できます。次のCSS要件を満たす必要があります。

• width、max-width、またはflex-basisが必要です
• white-space: nowrapが必要です
• overflowとvisible以外の値を持つ必要があります
• display: blockまたはinline-block（またはフレックスアイテムなどの機能的に同等のもの）である必要があります。

だからこれは動作します：

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: Ellipsis;
  border: 1px solid #ddd;
  margin: 0;
}

<p>
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
</p>

jsFiddleバージョン

しかし、widthを削除するか、overflowをデフォルトのvisibleにするか、white-space: nowrapを削除するか、ブロックコンテナ要素以外のものを使用してください。

ここでの1つの大きな手引き：text-overflow: Ellipsisは複数行テキストには効果がありません。 （white-space: nowrap要件だけでその可能性は排除されます。）

p {
    width: 200px;
    /* white-space: nowrap; */
    height: 90px; /* new */
    overflow: hidden;
    display: inline-block;
    text-overflow: Ellipsis;
    border: 1px solid #ddd;
    margin: 0;
}

<p>
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
</p>

jsFiddleバージョン

---

複数行テキストの省略記号

CSSには複数行のテキストに対する省略記号のプロパティがないため、さまざまな回避策が用意されています。これらのメソッドのいくつかはここにあります。

• jQuery dotdotdot ...
• ラインクランプ（複数行テキストの切り捨て）
• CSS省略記号：純粋なCSSで複数行の省略記号を管理する方法
• 複数行テキストの切り捨てのための純粋なCSSソリューション

上記のMobifyリンクは壊れていますが、 this codepen に実装されているようです。

Answer 3

複数行テキストへの省略符号については、このCSSを確認してください

body {
  margin: 0;
  padding: 50px;
}

/* mixin for multiline */
.block-with-text {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 6em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of  Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon;  use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>

Answer 4

行数を増やすには、 - webkit-line-clamp：4;を増やすだけです。

p {
    display: block;
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: Ellipsis;
}

<p>Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.</p>

---

編集02/05/2018

ラインクランプは、独自の文書化されていないCSS（webkit）です。 https://caniuse.com/#feat=css-line-clamp ごく少数のブラウザでしか動作しません。

Answer 5

これ のman が最善の解決策です。唯一のCSS：

.multiline-Ellipsis {
    display: block;
    display: -webkit-box;
    max-width: 400px;
    height: 109.2px;
    margin: 0 auto;
    font-size: 26px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: Ellipsis;
}

Answer 6

私はこのコンセプトで少し遊んでいます。基本的に、あなたが潜在的にあなたの最後の文字からピクセルを持っているか、そのようにカットオフを持っていることに問題がなければ、これは純粋なCSSとHTMLソリューションです：

これが機能する方法は、ビューポートの表示可能領域の下にdivを絶対に配置することです。コンテンツが大きくなるにつれて、divを可視領域にオフセットしてもらいたいのです。コンテンツが増えすぎると、divのオフセットが大きくなりすぎるため、コンテンツの高さの上限が上限になります。

HTML：

<div class="text-container">
  <span class="text-content">
    PUT YOUR TEXT HERE
    <div class="Ellipsis">...</div> // You could even make this a pseudo-element
  </span>
</div>

CSS：

.text-container {
    position: relative;
    display: block;
    color: #838485;
    width: 24em;
    height: calc(2em + 5px); // This is the max height you want to show of the text. A little extra space is for characters that extend below the line like 'j'
    overflow: hidden;
    white-space: normal;
}

.text-content {
  Word-break: break-all;
  position: relative;
  display: block;
  max-height: 3em;       // This prevents the Ellipsis element from being offset too much. It should be 1 line height greater than the viewport 
}

.Ellipsis {
  position: absolute;
  right: 0;
  top: calc(4em + 2px - 100%); // Offset grows inversely with content height. Initially extends below the viewport, as content grows it offsets up, and reaches a maximum due to max-height of the content
  text-align: left;
  background: white;
}

私はこれをChrome、FF、Safari、そしてIE 11でテストしました。

あなたはここでそれをチェックアウトすることができます： http://codepen.io/puopg/pen/vKWJwK

CSSマジックを使えば、キャラクターの突然のカットオフを緩和することさえできるかもしれません。

編集：私はこれが課していることの一つは、Word - breakであると思います：break - allそれ以外の場合、コンテンツはビューポートの最後まで拡張されませんので。 :(

Answer 7

この式を使用する：

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //put number of line here

Answer 8

残念ながら、CSSの現在の状況ではありません。

省略記号のレンダリングには、white-space:nowrapという前提条件があります。つまり、省略記号は単一行のテキストコンテナにのみ描画されます。

Answer 9

私はYouTubeがどのように彼らのホームページでそれを解決しそしてそれを単純化したかを見ました：

.multine-Ellipsis {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: Ellipsis;
  white-space: normal;
}

これにより、2行のコードが許可され、その後省略記号が追加されます。

要旨： https://Gist.github.com/eddybrando/386d3350c0b794ea87a2082bf4ab014b

Answer 10

これはあなたたちを助けることができるかもしれません。ツールチップホバーを使用したマルチライン楕円。 https://codepen.io/Anugraha123/pen/WOBdOb

<div>
     <p class="cards-values">Lorem ipsum dolor sit amet,   consectetur adipiscing elit. Nunc aliquet lorem commodo, semper mauris nec, suscipit nisi. Nullam laoreet massa sit amet leo malesuada imperdiet eu a augue. Sed ac diam quis ante congue volutpat non vitae sem. Vivamus a felis id dui aliquam tempus
      </p>
      <span class="tooltip"></span>
</div>

Answer 11

私はこれのための私自身の解決策を思いつきました：

/*this JS code puts the Ellipsis (...) at the end of multiline Ellipsis elements
 *
 * to use the multiline Ellipsis on an element give it the following CSS properties
 * line-height:xxx
 * height:xxx (must line-height * number of wanted lines)
 * overflow:hidden
 *
 * and have the class js_Ellipsis
 * */

//do all Ellipsis when jQuery loads
jQuery(document).ready(function($) {put_ellipsisses();});

//redo Ellipsis when window resizes
var re_Ellipsis_timeout;
jQuery( window ).resize(function() {
    //timeout mechanism prevents from chain calling the function on resize
    clearTimeout(re_Ellipsis_timeout);
    re_Ellipsis_timeout = setTimeout(function(){ console.log("re_Ellipsis_timeout finishes"); put_ellipsisses(); }, 500);
});

//the main function
function put_ellipsisses(){
    jQuery(".js_Ellipsis").each(function(){

        //remember initial text to be able to regrow when space increases
        var object_data=jQuery(this).data();
        if(typeof object_data.oldtext != "undefined"){
            jQuery(this).text(object_data.oldtext);
        }else{
            object_data.oldtext = jQuery(this).text();
            jQuery(this).data(object_data);
        }

        //truncate and Ellipsis
        var clientHeight = this.clientHeight;
        var maxturns=100; var countturns=0;
        while (this.scrollHeight > clientHeight && countturns < maxturns) {
            countturns++;
            jQuery(this).text(function (index, text) {
                return text.replace(/\W*\s(\S)*$/, '...');
            });
        }
    });
}

Answer 12

悪いCSSにはクロスブラウザのマルチラインクランピングがサポートされていません、それを押しているのはウェブキットだけです。

Github上のEllipsityのような単純なJavascript Ellipsisライブラリを試してみることもできます。ソースコードはとてもきれいで小さく、追加の変更を加える必要があるなら、それはとても簡単なはずです。

https://github.com/Xela101/Ellipsity

Answer 13

You can achieve this by a few lines of CSS and JS.

CSS:

        div.clip-context {
          max-height: 95px;
          Word-break: break-all;
          white-space: normal;
          Word-wrap: break-Word; //Breaking unicode line for MS-Edge works with this property;
        }

JS:

        $(document).ready(function(){
             for(let c of $("div.clip-context")){
                    //If each of element content exceeds 95px its css height, extract some first 
                    //lines by specifying first length of its text content. 
                   if($(c).innerHeight() >= 95){
                        //Define text length for extracting, here 170.
                        $(c).text($(c).text().substr(0, 170)); 
                        $(c).append(" ...");
                   }
             }

        });

HTML:

        <div class="clip-context">
            (Here some text)
        </div>

Answer 14

<!DOCTYPE html>
<html>
<head>
    <style>
        /* styles for '...' */
        .block-with-text {
            width: 50px;
            height: 50px;
            /* hide text if it more than N lines  */
            overflow: hidden;
            /* for set '...' in absolute position */
            position: relative;
            /* use this value to count block height */
            line-height: 1.2em;
            /* max-height = line-height (1.2) * lines max number (3) */
            max-height: 3.6em;
            /* fix problem when last visible Word doesn't adjoin right side  */
            text-align: justify;
            /* place for '...' */
            margin-right: -1em;
            padding-right: 1em;
        }
            /* create the ... */
            .block-with-text:before {
                /* points in the end */
                content: '...';
                /* absolute position */
                position: absolute;
                /* set position to right bottom corner of block */
                right: 0;
                bottom: 0;
            }
            /* hide ... if we have text, which is less than or equal to max lines */
            .block-with-text:after {
                /* points in the end */
                content: '';
                /* absolute position */
                position: absolute;
                /* set position to right bottom corner of text */
                right: 0;
                /* set width and height */
                width: 1em;
                height: 1em;
                margin-top: 0.2em;
                /* bg color = bg color under block */
                background: white;
            }
    </style>
</head>
<body>
    a
    <div class="block-with-text">g fdsfkjsndasdasd asd asd asdf asdf asdf asdfas dfa sdf asdflk jgnsdlfkgj nsldkfgjnsldkfjgn sldkfjgnls dkfjgns ldkfjgn sldkfjngl sdkfjngls dkfjnglsdfkjng lsdkfjgn sdfgsd</div>
    <p>This is a paragraph.</p>

</body>
</html>

Answer 15

何度も試した後、私はようやく複数行と単一行のオーバーフローを処理するためにjs/cssが混在するようになりました。

CSS3コード：

.forcewrap { // single line Ellipsis
  -ms-text-overflow: Ellipsis;
  -o-text-overflow: Ellipsis;
  text-overflow: Ellipsis;
  overflow: hidden;
  -moz-binding: url( 'bindings.xml#Ellipsis' );
  white-space: nowrap;
  display: block;
  max-width: 95%; // spare space for Ellipsis
}

.forcewrap.multiline {
  line-height: 1.2em;  // my line spacing 
  max-height: 3.6em;   // 3 lines
  white-space: normal;
}

.manual-Ellipsis:after {
  content: "\02026";      // '...'
  position: absolute;     // parent container must be position: relative
  right: 10px;            // typical padding around my text
  bottom: 10px;           // same reason as above
  padding-left: 5px;      // spare some space before Ellipsis
  background-color: #fff; // hide text behind
}

そして私は単純にこのようにdivのオーバーフローのためのjsコードでチェックします：

function handleMultilineOverflow(div) {
    // get actual element that is overflowing, an anchor 'a' in my case
    var element = $(div).find('a'); 
    // don't know why but must get scrollHeight by jquery for anchors
    if ($(element).innerHeight() < $(element).prop('scrollHeight')) {
        $(element).addClass('manual-Ellipsis');
    }
}

Htmlでの使用例

<div class="towrap">
  <h4>
    <a class="forcewrap multiline" href="/some/ref">Very long text</a>
  </h4>
</div>

Answer 16

下のコードをチェックして、すべてのブラウザをサポートする適切な配置の純粋なCSSトリックを確認してください

 .block-with-text {
    overflow: hidden;
    position: relative;
    line-height: 1.2em;
    max-height: 103px;
    text-align: justify;
    padding: 15px;
}

.block-with-text:after {
    content: '...';
    position: absolute;
    right: 15px;
    bottom: -4px;
    background: linear-gradient(to right, #fffff2, #fff, #fff, #fff);
}

。

<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>

Answer 17

p {
    width:100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    background:#fff;
    position:absolute;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>

Answer 18

複数行エリプシスに対して私のために働く私の解決策：

.crd-para {
    color: $txt-clr-main;
    line-height: 2rem;
    font-weight: 600;
    margin-bottom: 1rem !important;
    overflow: hidden;

    span::after {
        content: "...";
        padding-left: 0.125rem;
    }
}

Answer 19

あなたがjavascriptを使っているなら、多分あなたは以下のような何かをすることができます。しかし、これはコンテナの高さを考慮に入れていません...

// whatever string
const myString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque sem ut consequat pulvinar. Curabitur vehicula quam sit amet risus aliquet, sed rhoncus tortor fermentum. Etiam ac fermentum nisi. Ut in lobortis eros. Etiam urna felis, interdum sit amet fringilla eu, bibendum et nunc.';

// you can set max string length
const maxStrLength = 100;
const truncatedString = myString.length > maxStrLength ? `${myString.substring(0, maxStrLength)}...` : myString;

console.log(truncatedString);

Answer 20

インターネット全体を見て、これらのオプションの多くを試してみた後、それがサポートで正しくカバーされていることを確認する唯一の方法は、JavaScriptを使用することです。

*注意私はJqueryを使っていて、あなたのpost__itemsクラスには固定された最大の高さが必要です。

// loop over post items
$('.post__items').each(function(){
    var textArray = $(this).text().split(' ');
    while($(this).prop('scrollHeight') > $(this).prop('offsetHeight')) {
        textArray.pop();
        $(this).text(textArray.join(' ') + '...');
     }
});

Answer 21

p{
line-height: 20px;
width: 157px;
white-space: nowrap; 
overflow: hidden;
text-overflow: Ellipsis;
}

または高さとオーバーフローを使用して行を制限できます。

Answer 22

そうですね、CSS3のラインクランプ機能を使うことができます。

p {
    overflow: hidden;
    text-overflow: Ellipsis;
    display: -webkit-box;
    line-height: 25px;
    height: 52px;
    max-height: 52px;
    font-size: 22px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

自分の設定に合わせて設定を変更してください。