tràn văn bản: dấu chấm lửng không hoạt động

Đây là những gì tôi đã thử (xem ở đây ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Về cơ bản, tôi muốn nhịp co lại bằng dấu chấm lửng khi cửa sổ được làm nhỏ. Tôi đã làm gì sai?

Bạn cần phải có CSS overflow, width(hoặc max-width) display, và white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Phụ lục Nếu bạn muốn có một cái nhìn tổng quan về các kỹ thuật để thực hiện kẹp dòng (Elliles Overflow Ellipses), hãy xem trang CSS-Tricks này: https://css-tricks.com/line-clampin/

Addendum2 (Tháng 5 năm 2019)
Khi liên kết này tuyên bố, Firefox 68 sẽ hỗ trợ -webkit-line-clamp(!)

Hãy chắc chắn rằng bạn có một phần tử khối, kích thước tối đa và đặt tràn thành ẩn. (Đã thử nghiệm trong IE9 và FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Đối với nhiều dòng trong Chrome, hãy sử dụng:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Lấy cảm hứng từ youtube ;-)

Tôi đã có một vấn đề với dấu chấm lửng dưới chrome. Bật khoảng trắng: nowrap dường như sửa nó.

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

word-wrap: break-word;

cái này và chỉ cái này đã làm việc cho tôi

<pre> </pre> 

nhãn

bất cứ điều gì khác không làm được dấu chấm lửng ....

Chỉ là một headup cho bất cứ ai có thể vấp ngã này ... h2 của tôi đã được thừa hưởng

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

mà không cho phép dấu chấm lửng. Rõ ràng đây là finickey nhỉ?

Thêm mã dưới đây cho nơi bạn thích

thí dụ

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Đối với nhiều dòng

Trong chrome, bạn có thể áp dụng css này nếu bạn cần áp dụng dấu chấm lửng trên nhiều dòng.

Bạn cũng có thể thêm chiều rộng trong css của mình để chỉ định phần tử có chiều rộng nhất định:

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Bạn có thể thử sử dụng dấu chấm lửng bằng cách thêm vào phần sau trong CSS:

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

Nhưng có vẻ như mã này chỉ áp dụng cho cắt một dòng. Nhiều cách khác để cắt văn bản và hiển thị dấu chấm lửng có thể được tìm thấy trong trang web này: http://blog.sanuker.com/?p=631

Thêm các dòng sau trong CSS cho dấu chấm lửng để hoạt động

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

Đối với những người trong chúng ta không muốn sử dụng chiều rộng cố định , nó cũng hoạt động bằng cách sử dụng display: inline-grid. Vì vậy, cùng với các thuộc tính cần thiết bạn chỉ cần thêmdisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}