2行のテキストオーバーフローの省略記号

CSSルールの組み合わせを使用して、オーバーフロー（親の境界から抜け出す）のタイミングでテキストを省略記号（...）で終了できることを知っています。

同じ効果を達成することはできますが（簡単に言ってもかまいません）、テキストを複数行で折り返すことはできますか？

こちらがデモです。

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

ご覧のように、テキストはdivの幅よりも広くなると省略記号で終わります。ただし、テキストを2行目に折り返すための十分なスペースがまだあります。これはwhite-space: nowrap、省略記号が機能するために必要なによって中断されます。

何か案は？

PS：JSソリューションはありません、可能な場合は純粋なCSS。

私はあなたが見ているかどうかわからないんだけど、これを、しかしクリスCoyierの優れたCSS-Tricks.comがバックしながら、このAへのリンクを掲載し、それはあなたが求める正確に何を達成し、純粋なCSSのソリューションです。

（CodePenで表示するにはクリックしてください）

HTML：

<div class="ellipsis">
    <div>
        <p>
            Call me Ishmael. Some years ago – never mind how long precisely – having
            little or no money in my purse, and nothing particular to interest me on
            shore, I thought I would sail about a little and see the watery part of the
            world. It is a way I have of driving off the spleen, and regulating the
            circulation. Whenever I find myself growing grim about the mouth; whenever it
            is a damp, drizzly November in my soul; whenever I find myself involuntarily
            pausing before coffin warehouses, and bringing up the rear of every funeral I
            meet; and especially whenever my hypos get such an upper hand of me, that it
            requires a strong moral principle to prevent me from deliberately stepping
            into the street, and methodically knocking people's hats off – then, I account
            it high time to get to sea as soon as I can.
        </p>
    </div>
</div>

CSS：

html,body,p {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA;
}
.ellipsis:before {
    content: "";
    float: left;
    width: 5px;
    height: 200px;
}
.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis:after {
    content: "\02026";
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right;
    position: relative;
    top: -25px;
    left: 100%;
    width: 3em;
    margin-left: -3em;
    padding-right: 5px;
    text-align: right;
    background-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
    �background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
    background: -webkit-gradient(linear,left top,right top,
        from(rgba(255,255,255,0)),to(white),color-stop(50%,white));
        background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
        background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
        background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
        background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
    }

もちろん、純粋なCSSソリューションであることは、かなり複雑なソリューションでもあることを意味しますが、クリーンでエレガントに機能します。これはJavascriptで実現する方がはるかに簡単（そしておそらくより分解可能）であるため、Javascriptは問題外だと思います。

追加のボーナスとして、プロセス全体のダウンロード可能なzipファイル（それとすべてを理解したい場合）だけでなく、SASSミックスインファイルもあり、簡単にプロセスに折りたたむことができます。

お役に立てれば！

http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

簡単なCSSプロパティは、トリックを行うことができます。以下は、3行の省略記号です。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

この純粋なCSSバージョンを見てください：http : //codepen.io/martinwolf/pen/qlFdp

display: -webkit-box;
max-width: 400px;
height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;

以下のCssがトリックを実行します。

2行目の後、テキストには...が含まれます。

line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

私のソリューションはamcdnlの1つを再利用していますが、私のフォールバックは、テキストコンテナーの高さの使用で構成されています。

.my-caption h4 {
    display: -webkit-box;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    height: 40px;/* Fallback for non-webkit */
}

上記が機能しない場合はこれを使用してください

 display: block;
 display: -webkit-box;
 max-width: 100%;
 margin: 0 auto;
 -webkit-line-clamp: 2;
 /* autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */
 overflow: hidden;
 text-overflow: ellipsis;

stackoveflowで見た回答に基づいて、このLESSミックスインを作成しました（このリンクを使用してCSSコードを生成します）：

.max-lines(@lines: 3; @line-height: 1.2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  line-height: @line-height;
  max-height: @line-height * @lines;
}

使用法

.example-1 {
    .max-lines();
}

.example-2 {
    .max-lines(3);
}

.example-3 {
    .max-lines(3, 1.5);
}

2つのクラスを組み合わせると、よりエレガントに見えます。two-lines1行だけが参照する必要がある場合は、クラスをドロップできます。

.ellipse {
          white-space: nowrap;
          display:inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
       }
      .two-lines {
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
      }
      .width{
          width:100px;
          border:1px solid hotpink;
      }

        <span class='width ellipse'>
          some texts some texts some texts some texts some texts some texts some texts
       </span>

       <span class='width ellipse two-lines'>
          some texts some texts some texts some texts some texts some texts some texts
       </span>

数行に制限すると、ほとんどすべてのブラウザで機能しますが、省略記号（3ドット）はFirefoxおよびIEでは表示されません。デモ-http://jsfiddle.net/ahzo4b91/1/

div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden; 
}

          text-overflow: ellipsis;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          line-height: 36px;
          max-height: 18px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

線クランプと線高さの両方の組み合わせを見つけました：D

私の角度付きアプリでは、2行目のテキストのオーバーフローで省略記号を実現するために次のスタイルが機能しました。

 <div style="height:45px; overflow: hidden; position: relative;">
     <span class=" block h6 font-semibold clear" style="overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; 
        line-height: 20px; /* fallback */
        max-height: 40px; /* fallback */
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;">
        {{ event?.name}} </span>
 </div>

それが誰かを助けることを願っています。

scssで作業する場合!autoprefixerは、コメントをpostcssで保持できるようにコメントの先頭に追加する必要があります。

その問題に直面したので、ここに投稿しました

line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

参照

省略記号、純粋なCSSの代わりに溶解効果を使用でき、よりプロフェッショナルに見えます。

    <div style="width: 293px; height:48px; overflow: hidden; ">
        More than two line of text goes here-More than two line of text goes here
    </div>
    <div style="position: relative; top: -24px; width: 293px; height:24px; 
             background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
    </div>

ここでは、背景色を白と想定しています。

これは完全なハックですが、動作します：

http://jsfiddle.net/2wPNg/

div {
    width: 30%;
    float: left;
    margin-right: 2%;
    height: 94px;
    overflow: hidden;
    position: relative;
}

div:after {
     display: block;
      content: '...';
      width: 1em;
  height: 1.5em;
  background: #fff;
  position: absolute;
  bottom: -6px;
  right: 0;
    }

それは問題を持っています....それはぎこちなく手紙を切り取るかもしれません、そしてそれはおそらく応答サイトでいくつかの奇妙な結果をもたらすでしょう。

jQueryを使用して省略記号を管理する簡単なスクリプトを次に示します。要素の実際の高さを検査し、非表示の元のノードと切り捨てられたノードを作成します。ユーザーがクリックすると、2つのバージョンが切り替わります。

大きな利点の1つは、予想どおり、「省略」が最後の言葉に近いことです。

純粋なCSSソリューションを使用する場合、3つのドットは最後の単語から離れて表示されます。

function manageShortMessages() {

        $('.myLongVerticalText').each(function () {
            if ($(this)[0].scrollHeight > $(this)[0].clientHeight)
                $(this).addClass('ellipsis short');
        });

        $('.myLongVerticalText.ellipsis').each(function () {
            var original = $(this).clone().addClass('original notruncation').removeClass('short').hide();
            $(this).after(original);

            //debugger;
            var shortText = '';
            shortText = $(this).html().trim().substring(0, 60) + '...';
            $(this).html(shortText);
        });
        
        $('.myLongVerticalText.ellipsis').click(function () {
            $(this).hide();

            if ($(this).hasClass('original'))
            {
                $(this).parent().find('.short').show();
            }
            else
            {
                $(this).parent().find('.original').show();
            }
        });
    }
	
  manageShortMessages();

div {
 border:1px solid red;
 margin:10px;
}

div.myLongVerticalText {
  height:30px;
  width:450px;
}

div.myLongVerticalText.ellipsis {
 cursor:pointer;
}

div.myLongVerticalText.original {
  display:inline-block;
  height:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="myLongVerticalText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada.

Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt.
</div>


<div class="myLongVerticalText">
One Line Lorem ipsum dolor sit amet.  
</div>
</body>

ターゲットが何かはわかりませんが、テキストを2行目に表示しますか？

ここにあなたのjsFiddleがあります：http ://jsfiddle.net/8kvWX/4/ 以下を削除しました：

     white-space:nowrap;  

これがあなたが探しているものかどうかわかりません。

よろしく、

ミー