ข้อความจุดไข่ปลาล้นสองบรรทัด

ฉันรู้ว่าคุณสามารถใช้กฎ CSS ร่วมกันเพื่อทำให้ข้อความลงท้ายด้วยจุดไข่ปลา (... ) เมื่อถึงเวลาที่จะล้น (ออกจากขอบเขตของผู้ปกครอง)

เป็นไปได้ไหม (อย่าลังเลที่จะพูดว่าไม่) เพื่อให้ได้เอฟเฟกต์เดียวกัน แต่ให้ตัดข้อความมากกว่าหนึ่งบรรทัด

นี่คือการสาธิต

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

อย่างที่คุณเห็นข้อความจะลงท้ายด้วยจุดไข่ปลาเมื่อกว้างกว่าความกว้างของ div อย่างไรก็ตามยังมีพื้นที่เพียงพอสำหรับข้อความที่จะตัดบรรทัดที่สองและดำเนินการต่อไป สิ่งนี้ถูกขัดจังหวะโดยwhite-space: nowrapซึ่งจำเป็นเพื่อให้จุดไข่ปลาทำงาน

ความคิดใด ๆ ?

PS: ไม่มีโซลูชัน JS CSS บริสุทธิ์ถ้าเป็นไปได้

ฉันไม่แน่ใจว่าคุณเคยเห็นสิ่งนี้หรือไม่ แต่ CSS-Tricks.com ที่ยอดเยี่ยมของ Chris Coyier ได้โพสต์ลิงก์ไปยังสิ่งนี้ในขณะที่ย้อนกลับไปและเป็นโซลูชัน 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 mixin เพื่อให้คุณสามารถพับลงในกระบวนการของคุณได้อย่างง่ายดาย

หวังว่านี่จะช่วยได้!

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

คุณสมบัติ CSS ง่ายๆสามารถทำเคล็ดลับ ต่อไปนี้ใช้สำหรับจุดไข่ปลาสามบรรทัด

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 ด้านล่างควรทำเคล็ดลับ

หลังจากบรรทัดที่สองข้อความจะมี ...

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

ใช้สิ่งนี้หากด้านบนไม่ทำงาน

 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;

วิธีแก้ปัญหาของฉันใช้หนึ่งใน amcdnl แต่ทางเลือกของฉันประกอบด้วยการใช้ความสูงสำหรับที่เก็บข้อความ:

.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 */
}

จากคำตอบที่ฉันเห็นใน 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);
}

ดูเหมือนว่าการรวมสองคลาสจะสง่างามมากขึ้น คุณสามารถดร็อปtwo-linesคลาสได้หากต้องการดูเพียงแถวเดียว:

.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; 
}

สำหรับผู้ที่ทำงานในscssคุณต้องเพิ่ม!autoprefixerที่จุดเริ่มต้นของความคิดเห็นเพื่อที่จะได้รับการเก็บรักษาไว้สำหรับ postcss:

ฉันประสบปัญหานั้นจึงโพสต์ไว้ที่นี่

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

ข้อมูลอ้างอิง

          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

ในแอปเชิงมุมของฉันสไตล์ต่อไปนี้ใช้ได้กับฉันเพื่อให้ได้จุดไข่ปลาในส่วนที่ล้นของข้อความในบรรทัดที่สอง :

 <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>

หวังว่ามันจะช่วยใครบางคน

คุณสามารถใช้เอฟเฟกต์ที่ละลายออกแทนจุดไข่ปลา, 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 ตรวจสอบความสูงที่แท้จริงขององค์ประกอบและสร้างโหนดดั้งเดิมที่ซ่อนอยู่และโหนดที่ถูกตัดทอน เมื่อผู้ใช้คลิกจะสลับไปมาระหว่างสองเวอร์ชัน

ประโยชน์ที่ดีอย่างหนึ่งคือ "จุดไข่ปลา" อยู่ใกล้คำสุดท้ายตามที่คาดไว้

หากคุณใช้โซลูชัน CSS ที่แท้จริงจุดสามจุดจะอยู่ห่างจากคำสุดท้าย

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>

ไม่แน่ใจว่าเป้าหมายของคุณคืออะไร แต่คุณต้องการให้ข้อความอยู่ในบรรทัดที่สองหรือไม่?

นี่คือ jsFiddle ของคุณ: http://jsfiddle.net/8kvWX/4/เพิ่งลบสิ่งต่อไปนี้:

     white-space:nowrap;  

ฉันไม่แน่ใจว่านี่คือสิ่งที่คุณกำลังมองหาหรือไม่

ความนับถือ,

แหม่