dấu chấm lửng css trên dòng thứ hai

CSS text-overflow: ellipsistrên dòng thứ hai, điều này có thể? Tôi không thể tìm thấy nó trên mạng.

thí dụ:

những gì tôi muốn là như thế này:

I hope someone could help me. I need 
an ellipsis on the second line of...

Nhưng những gì đang xảy ra là thế này:

I hope someone could help me. I ... 

Yêu cầu text-overflow: ellipsis;để làm việc là phiên bản một dòng của white-space( pre, nowrapv.v.). Có nghĩa là văn bản sẽ không bao giờ đạt đến dòng thứ hai.

Ergo. Không thể có trong CSS thuần.

Nguồn của tôi khi tôi đang tìm kiếm chính xác điều tương tự ngay bây giờ: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDIT Nếu các vị thần CSS tốt sẽ triển khai http://www.w3.org/TR/css-overflow-3/#max-lines chúng ta có thể làm điều này trong CSS thuần bằng cách sử dụng fragments(mới) và max-lines(mới). Ngoài ra một số thông tin khác về http://css-tricks.com/line-clampin/

EDIT 2 WebKit / Blink có line-clamp: -webkit-line-clamp: 2sẽ đặt dấu chấm lửng trên dòng thứ 2.

Điều này sẽ hoạt động trong trình duyệt webkit :

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

Như những người khác đã trả lời, một giải pháp CSS thuần túy không tồn tại. Có một plugin jQuery rất dễ sử dụng, nó được gọi là dotdotdot . Nó sử dụng chiều rộng và chiều cao của container để tính toán nếu cần cắt bớt và thêm dấu chấm lửng.

$("#multilinedElement").dotdotdot();

Đây là một jsFiddle .

Tôi thấy rằng câu trả lời của Skeep là không đủ và cũng cần một overflowphong cách:

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

nếu ai đó đang sử dụng SASS / SCSS và vấp phải câu hỏi này - có lẽ mixin này có thể giúp ích:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

điều này chỉ thêm dấu chấm lửng trong trình duyệt webkit. Phần còn lại chỉ cần cắt nó ra.

Chỉ cần sử dụng kẹp dòng cho các trình duyệt hỗ trợ nó (hầu hết các trình duyệt hiện đại) và quay lại 1 dòng cho cũ hơn.

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


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

Thật là xấu hổ khi bạn không thể làm cho nó hoạt động trên hai dòng! Sẽ thật tuyệt vời nếu phần tử là khối hiển thị và có chiều cao được đặt thành 2em hoặc thứ gì đó, và khi văn bản tràn ra, nó sẽ hiển thị dấu chấm lửng!

Đối với một lớp lót duy nhất bạn có thể sử dụng:

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

Đối với nhiều dòng, có thể bạn có thể sử dụng một Polyfill như jQuery autoellipsis có trên github http://pvdspek.github.com/jquery.autoellipsis/

Tôi không phải là một chuyên gia về JS, nhưng tôi đã tìm ra một vài cách bạn có thể làm điều này.

HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

Sau đó, với jQuery, bạn cắt nó xuống một số ký tự cụ thể nhưng để lại từ cuối cùng như thế này:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

Kết quả trông như thế này:

Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Morbi
Elementum resultat tortor et.

Hoặc, bạn có thể chỉ cần cắt nó xuống một số ký tự cụ thể như thế này:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

Kết quả trông như thế này:

Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Morbi
Elementum resultat tortor et euismod Đá

Hi vọng nó giúp được chút ít.

Đây là jsFiddle .

đây là ví dụ tốt trong css tinh khiết.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.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;
}

<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Tôi đã sử dụng jQuery-condense-plugin trước đây, có vẻ như nó có thể làm những gì bạn muốn. Nếu không, có những plugin khác nhau có thể phù hợp với nhu cầu của bạn.

Chỉnh sửa: Tạo cho bạn bản demo - lưu ý rằng tôi đã liên kết jquery.condense.js trên bản demo thực hiện điều kỳ diệu, vì vậy tín dụng đầy đủ cho tác giả của plugin đó :)

Đây là một CSS không chuẩn, không có trong phiên bản CSS hiện tại (Firefox không hỗ trợ). Hãy thử sử dụng JavaScript thay thế.

Cách css thuần túy của văn bản multiline với dấu chấm lửng

Điều chỉnh độ cao của hộp chứa văn bản, dòng điều khiển để ngắt bằng -webkit-line-Kẹp: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Tôi đã gặp vấn đề này trước đây và không có giải pháp css thuần túy

Đó là lý do tại sao tôi đã phát triển một thư viện nhỏ để giải quyết vấn đề này (trong số những người khác). Thư viện cung cấp các đối tượng để mô hình hóa và thực hiện kết xuất văn bản ở cấp độ chữ. Ví dụ, bạn có thể mô phỏng tràn văn bản: dấu chấm lửng với giới hạn tùy ý (không cần một dòng)

Đọc thêm tại http://www.samuelrossille.com/home/jstext.html để xem ảnh chụp màn hình, hướng dẫn và liên kết tải xuống.

Nếu bất cứ ai đang cố gắng để kẹp đường thẳng hoạt động trong flexbox , thì sẽ khó hơn một chút - đặc biệt là khi bạn đang thử nghiệm tra tấn bằng những từ thực sự dài. Sự khác biệt thực sự duy nhất trong đoạn mã này là min-width: 0;trong mục flex chứa văn bản cắt ngắn và word-wrap: break-word;. Một hat-tip để https://css-tricks.com/flexbox-truncated-text/ cho cái nhìn sâu sắc. Disclaimer: đây vẫn chỉ là webkit theo như tôi biết.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (phiên bản codepen)

Tất cả các câu trả lời ở đây đều sai, họ thiếu phần quan trọng, chiều cao

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>

một phương pháp css thuần túy dựa trên -webkit-line-Kẹp, hoạt động trên webkit:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Không có cách thực sự dễ dàng để làm điều này. Sử dụng thư viện Kẹp.js.

$clamp(myHeader, {clamp: 3});

Tôi đã tìm thấy một giải pháp tuy nhiên bạn cần biết độ dài ký tự thô sẽ phù hợp với vùng văn bản của bạn, sau đó nối một ... vào khoảng trống đặt trước.

Cách tôi đã làm là:

1. giả sử độ dài ký tự thô (trong trường hợp này là 200) và chuyển đến một hàm cùng với văn bản của bạn
2. phân chia không gian để bạn có một chuỗi dài
3. sử dụng jQuery để cắt lát không gian "" đầu tiên sau độ dài ký tự của bạn
4. tham gia còn lại ...

mã:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

đây là một câu đố - http://jsfiddle.net/GYsW6/1/