Overflow: dấu chấm ẩn ở cuối

205

Giả sử tôi có một chuỗi " Tôi thích những mẩu thịt lớn và tôi không thể nói dối " và tôi đã cắt nó ra overflow:hidden, vì vậy nó sẽ hiển thị một cái gì đó như thế này:

Tôi thích butts lớn và tôi không thể

cắt văn bản. Có thể hiển thị như thế này:

Tôi thích butts lớn và tôi không thể ...

sử dụng CSS?

html css

— mannicken
nguồn

46

Có phải câu hỏi này là một mưu mẹo để quảng bá bài hát?

— Cyril Gupta

12

@CyrilGupta Xin lỗi vì phản hồi muộn. Tôi phải chạy vào phòng tắm. Để trả lời câu hỏi của bạn ... Có

— Joe Phillips

1

Bản sao có thể có của Làm cách nào tôi có thể hiển thị dấu chấm ("...") trong một khoảng có tràn ẩn?

— Termininja

282

Bạn có thể sử dụng văn bản tràn: dấu chấm lửng; mà theo caniuse được hỗ trợ bởi tất cả các trình duyệt chính.

Đây là bản demo trên jsbin.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big buts and I can not lie.
</div>

Mở rộng đoạn trích

— Joe Phillips
nguồn

Điều này dường như hoạt động trong Firefox 15.0.1: w3schools.com/cssref/tryit.asp?filename=trycss3 lòng

— Jace

Vâng, nó dường như hoạt động trong các phiên bản mới hơn. Rõ ràng câu trả lời này là một vài năm tuổi.

— Joe Phillips

Firefox bắt đầu hỗ trợ phiên bản này kể từ phiên bản 7, được phát hành vào nửa cuối năm 2011

— Richard Ev

1

Tôi có thể sử dụng ý thức chung của mình để nói rằng câu trả lời này là "đúng" dựa trên số phiếu và bình luận. Tuy nhiên, tôi không thấy thực tế câu trả lời này là "đúng" như thế nào. Tôi đã sử dụng cả hai overflow: hidden;và text-overflow: ellipsis;trong một phần tử (nghĩa là phần tử khối) và không tìm thấy ...ở cuối (tất nhiên tôi chắc chắn rằng nó thực sự tràn ra). Tôi cũng đã cố gắng này mà không có overflow: hidden;phần, và cũng với một yếu tố bên trong yếu tố mà yếu tố có overflow: hidden;và có text-overflow: ellipsis;Không có vấn đề làm thế nào tôi cố gắng, đây là một thất bại ..

— VoidKing

2

Vâng, tôi nghĩ rằng tôi biết vấn đề. Tôi đang cố gắng hạn chế tràn dựa trên max-heightđể tôi không thể white-space:đặt thànhnowrap

— VoidKing

88

Kiểm tra đoạn mã sau cho vấn đề của bạn

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>

Mở rộng đoạn trích

— Arjun
nguồn

4

lên để thêm "khoảng trắng: nowrap;" có thể cần thiết trong một số trường hợp

— leo

2

Làm thế nào để làm cho văn bản để hiển thị 2 dòng sau đó biến mất?

— Martian2049

1

@ Matian2040 bạn có thể điều chỉnh bằng cách đưa ra các kiểu ẩn chiều cao cố định và tràn, hãy kiểm tra fiddle jsfiddle.net/5135L4bx này

— Arjun

1

oh tôi hiểu rồi tôi đã thử tuy nhiên có vẻ như hai dòng có nghĩa là sẽ không có ... cuối cùng?

— Martian2049

1

display: inline-block;là thành phần còn thiếu đối với tôi. Cảm ơn bạn.

— Seth

18

Hãy thử điều này nếu bạn muốn hạn chế các dòng lên đến 3 và sau ba dòng, các chấm sẽ xuất hiện. Nếu chúng ta muốn tăng các dòng, chỉ cần thay đổi giá trị -webkit-line-Kẹp và cung cấp chiều rộng cho kích thước div.

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

— Nagendra Matala
nguồn

xin lỗi, tôi không chắc làm thế nào tôi loại bỏ những lời của bạn như vậy!

— Alec

hoạt động tuyệt vời trên Chrome, nhưng lưu ý rằng điều này sẽ không hoạt động trên Firefox

— Ken Bigler

Làm thế nào để tôi làm điều này trên một trình duyệt khác, nói Firefox? Chỉnh sửa: stackoverflow.com/questions/33058004/

— Mạnh

17

Hy vọng nó hữu ích cho bạn:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

Mở rộng đoạn trích

— Vũ Phan
nguồn

15

Vâng, thông qua text-overflow tính trong CSS 3. Hãy cẩn thận: nó chưa được hỗ trợ phổ biến trong các trình duyệt.

— ceejayoz
nguồn

3

Hiện tại hỗ trợ trình duyệt khá tốt, kể từ tháng 2 năm 2012. Xem caniuse.com/#search=text-overflow

— Simon East

1

Ah, bạn là lý do câu hỏi này xuất hiện ba năm sau.

— Ông Lister

8

Trong bootstrap 4 , bạn có thể thêm một .text-truncatelớp để cắt bớt văn bản bằng dấu chấm lửng.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
  I like big butts and I cannot lie
</span>

Mở rộng đoạn trích

— Penny Lưu
nguồn

6

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>

— Cuteboy_Max
nguồn

3

Hầu hết các giải pháp sử dụng chiều rộng tĩnh ở đây. Nhưng nó có thể đôi khi sai vì một số lý do.

Ví dụ: Tôi đã có bảng với nhiều cột. Hầu hết chúng là hẹp (chiều rộng tĩnh). Nhưng cột chính phải càng rộng càng tốt (phụ thuộc vào kích thước màn hình).

HTML:

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

CSS:

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}

— Thiếu tá
nguồn

3

<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>

— manoj patel
nguồn

-1

ẩn văn bản khi tải và hiển thị trên di chuột

<span class="hide-text"> How to hide text by dots and show text on hover</span>

.hide-text {
    width: 70px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  span:hover {
     white-space: unset;
     text-overflow: unset;
  }

— Rohit Parte
nguồn