Gói văn bản chỉ trong vòng hai dòng bên trong div

Tôi muốn bọc một văn bản chỉ trong vòng hai dòng bên trong div có chiều rộng cụ thể. Nếu văn bản vượt quá độ dài của hai dòng thì tôi muốn hiển thị nhật thực. Có cách nào để làm điều đó bằng cách sử dụng CSS không?

ví dụ

Sample text showing wrapping
of text in only two line...

Cảm ơn

Có thể giới hạn đầu ra ở hai dòng văn bản với CSS, nếu bạn đặt line-heightvà heightcủa phần tử và đặt overflow:hidden;:

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

--- jsFiddle DEMO ---

Ngoài ra, bạn có thể sử dụng CSS text-overflowvà white-spacethuộc tính để thêm dấu chấm lửng, nhưng điều này dường như chỉ hoạt động cho một dòng.

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

Và một bản demo:

--- jsFiddle DEMO ---

Đạt được cả nhiều dòng văn bản và dấu chấm lửng dường như là lĩnh vực của javascript.

Một giải pháp đơn giản và nhanh chóng khác

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

Tham khảo câu hỏi và câu trả lời gốc ở đây

Cái hay nhất mà tôi từng thấy chỉ có CSS ​​và đáp ứng đến từ Blog nhà phát triển Mobify - Dấu ba chấm CSS: Cách quản lý dấu ba chấm nhiều dòng trong CSS thuần túy :

Ví dụ về JS Fiddle

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

Html:

<div class="ellipsis">
    <div class="blah">
        <p>Call me Ishmael. Some years ago &ndash; never mind how long precisely &ndash; 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 &ndash; then, I account it high time to get to sea as soon as I can.</p>
    </div>
</div>

Tôi tin rằng giải pháp chỉ CSS chỉ text-overflow: ellipsisáp dụng cho một dòng, vì vậy bạn sẽ không thể đi theo con đường này:

.yourdiv {

    line-height: 1.5em; /* Sets line height to 1.5 times text size */
    height: 3em; /* Sets the div height to 2x line-height (3 times text size) */
    width: 100%; /* Use whatever width you want */
    white-space: normal; /* Wrap lines of text */
    overflow: hidden; /* Hide text that goes beyond the boundaries of the div */
    text-overflow: ellipsis; /* Ellipses (cross-browser) */
    -o-text-overflow: ellipsis; /* Ellipses (cross-browser) */
}

Bạn đã thử http://tpgblog.com/threedots/ cho jQuery chưa?

Giải pháp CSS chỉ dành cho Webkit

// Only for DEMO
$(function() {

  $('#toggleWidth').on('click', function(e) {

    $('.multiLineLabel').toggleClass('maxWidth');

  });

})

.multiLineLabel {
  display: inline-block;
  box-sizing: border-box;
  white-space: pre-line;
  word-wrap: break-word;
}

.multiLineLabel .textMaxLine {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* Only for DEMO */

.multiLineLabel.maxWidth {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiLineLabel">
  <span class="textMaxLine">This text is going to wrap automatically in 2 lines in case the width of the element is not sufficiently wide.</span>
</div>
<br/>
<button id="toggleWidth">Toggle Width</button>

Chỉ CSS

    line-height: 1.5;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

Hãy thử một cái gì đó như sau: http://jsfiddle.net/6jdj3pcL/1/

<p>Here is a paragraph with a lot of text ...</p>

p {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    width: 300px;
}

p::before {
   content: '...';
   float: right;
   margin-top: 1.5em;
}

Thông thường, một đường cắt ngắn một dòng khá đơn giản

.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Cắt ngắn hai dòng phức tạp hơn một chút, nhưng nó có thể được thực hiện với css, ví dụ này là trong sass.

@mixin multiLineEllipsis($lineHeight: 1.2rem, $lineCount: 2, $bgColor: white, $padding-right: 0.3125rem, $width: 1rem, $ellipsis-right: 0) {
  overflow: hidden; /* hide text if it is more than $lineCount lines  */
  position: relative; /* for set '...' in absolute position */
  line-height: $lineHeight; /* use this value to count block height */
  max-height: $lineHeight * $lineCount; /* max-height = line-height * lines max number */
  padding-right: $padding-right; /* place for '...' */
  white-space: normal; /* overwrite any white-space styles */
  word-break: break-all; /* will break each letter in word */
  text-overflow: ellipsis; /* show ellipsis if text is broken */

  &::before {
    content: '...'; /* create the '...'' points in the end */
    position: absolute;
    right: $ellipsis-right;
    bottom: 0;
  }

  &::after {
    content: ''; /* hide '...'' if we have text, which is less than or equal to max lines and add $bgColor */
    position: absolute;
    right: 0;
    width: $width;
    height: 1rem * $lineCount;
    margin-top: 0.2rem;
    background: $bgColor; /* because we are cutting off the diff we need to add the color back. */
  }
}

Xem http://jsfiddle.net/SWcCt/ .

Chỉ cần đặt một line-heightnửa của height:

line-height:20px;
height:40px;

Tất nhiên, để thành text-overflow: ellipsiscông bạn cũng cần:

overflow:hidden;
white-space: pre;

Sử dụng liên kết dưới đây để bọc thành hai dòng, hãy kiểm tra liên kết

Chèn dấu chấm lửng (...) vào thẻ HTML nếu nội dung quá rộng

Điều đó cần jquery bên dưới

http://www.jeremymartin.name/projects.php?project=jTruncate

@Asiddeen bn Giải pháp của Muhammad phù hợp với tôi với một chút sửa đổi đối với css

    .text {
 line-height: 1.5;
  height: 6em; 
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 }