Dấu chấm lửng tràn văn bản trên hai dòng

Tôi biết bạn có thể sử dụng kết hợp các quy tắc CSS để làm cho văn bản kết thúc bằng dấu chấm lửng (...) khi đến lúc tràn (vượt ra khỏi giới hạn của phụ huynh).

Có thể (vui lòng nói, không) để đạt được hiệu quả tương tự, nhưng để văn bản nằm trên nhiều dòng?

Đây là một bản demo .

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

Như bạn có thể thấy, văn bản kết thúc bằng dấu chấm lửng khi nó rộng hơn chiều rộng của div. Tuy nhiên, vẫn có đủ không gian để văn bản nằm trên dòng thứ hai và tiếp tục. Điều này bị gián đoạn bởi white-space: nowrap, điều này được yêu cầu để dấu chấm lửng hoạt động.

Bất kỳ ý tưởng?

PS: Không có giải pháp JS, CSS thuần túy nếu có thể.

Tôi không chắc bạn đã xem NÀY chưa , nhưng CSS-Tricks.com xuất sắc của Chris Coyier đã đăng một liên kết đến điều này một thời gian trước và đó là một giải pháp CSS thuần túy hoàn thành chính xác những gì bạn tìm kiếm.

(Bấm để xem trên 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);
    }

Tất nhiên, là một giải pháp CSS thuần túy có nghĩa là nó cũng là một giải pháp khá phức tạp, nhưng nó hoạt động rõ ràng và trang nhã. Tôi sẽ giả định rằng Javascript là không cần thiết vì điều này dễ đạt được hơn nhiều (và có thể nói là dễ phân hủy hơn) với Javascript.

Như một phần thưởng bổ sung, có một tệp zip có thể tải xuống của quá trình hoàn chỉnh (nếu bạn muốn hiểu về nó và tất cả), nhưng cũng có một tệp SASS mixin để bạn có thể gấp nó vào quy trình của mình một cách dễ dàng.

Hi vọng điêu nay co ich!

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

Thuộc tính CSS dễ dàng có thể thực hiện thủ thuật. Sau đây là dấu chấm lửng ba dòng.

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

Hãy xem phiên bản css thuần túy này: 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 bên dưới sẽ làm thủ thuật.

Sau dòng thứ hai, văn bản sẽ chứa ...

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

Sử dụng cái này nếu ở trên không hoạt động

 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;

Giải pháp của tôi sử dụng lại giải pháp của amcdnl, nhưng dự phòng của tôi bao gồm việc sử dụng chiều cao cho vùng chứa văn bản:

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

Dựa trên câu trả lời mà tôi đã thấy trong stackoveflow, tôi đã tạo LESS mixin này ( sử dụng liên kết này để tạo mã 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;
}

Sử dụng

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

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

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

Nó có vẻ thanh lịch hơn khi kết hợp hai lớp. Bạn có thể bỏ two-lineslớp nếu chỉ một hàng cần xem:

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

Giới hạn ở một vài dòng sẽ hoạt động trong hầu hết các trình duyệt, nhưng dấu chấm lửng (3 chấm) sẽ không hiển thị trong Firefox & IE. Demo - 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;

Tôi đã tìm thấy một sự kết hợp của cả tác phẩm kẹp dòng và chiều cao dòng: D

Trong ứng dụng góc cạnh của tôi, kiểu sau đã giúp tôi đạt được dấu ba chấm trên phần tràn văn bản trên dòng thứ hai :

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

Hy vọng nó sẽ giúp một ai đó.

Đối với những người làm việc trong scss , bạn cần thêm !autoprefixervào đầu nhận xét để nó được giữ nguyên cho postcss:

Tôi đã đối mặt với vấn đề đó, đó là lý do tại sao đăng nó ở đây

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

Tài liệu tham khảo

Bạn có thể sử dụng hiệu ứng hòa tan thay vì dấu chấm lửng, CSS thuần túy và trông chuyên nghiệp hơn:

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

Ở đây tôi đã giả định màu nền của bạn là màu trắng.

Đây là một vụ hack hoàn toàn, nhưng nó hoạt động:

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

Nó có vấn đề .... nó có thể ngắt một bức thư một cách vụng về và nó có thể sẽ có một số kết quả kỳ lạ trên một trang web đáp ứng.

Đây là một tập lệnh đơn giản để quản lý dấu chấm lửng bằng jQuery. Nó kiểm tra chiều cao thực của phần tử và nó tạo ra một nút gốc ẩn và một nút bị cắt ngắn. Khi người dùng nhấp vào, nó sẽ chuyển đổi giữa hai phiên bản.

Một trong những lợi ích tuyệt vời là "dấu chấm lửng" ở gần từ cuối cùng, như mong đợi.

Nếu bạn sử dụng các giải pháp CSS thuần túy, ba dấu chấm sẽ xuất hiện cách xa từ cuối cùng.

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>

Không chắc mục tiêu của bạn là gì, nhưng bạn có muốn văn bản xuất hiện ở dòng thứ hai không?

Đây là jsFiddle của bạn: http://jsfiddle.net/8kvWX/4/ vừa xóa phần sau:

     white-space:nowrap;  

Tôi không chắc liệu đây có phải là những gì bạn đang tìm kiếm hay không.

Trân trọng,

Mee