Tại sao dấu chấm lửng CSS không hoạt động trong ô bảng?

Xem xét ví dụ sau: ( bản demo trực tiếp tại đây )

$(function() {
  console.log("width = " + $("td").width());
});

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

Đầu ra là : width = 139, và dấu chấm lửng không xuất hiện.

Tôi đang thiếu gì ở đây?

Rõ ràng, thêm:

td {
  display: block; /* or inline-block */
}

giải quyết vấn đề là tốt.

Một giải pháp khả thi khác là đặt table-layout: fixed;cho bảng và cũng đặt nó width. Ví dụ: http://jsfiddle.net/fd3Zx/5/

Nó cũng quan trọng để đặt

table-layout:fixed;

Trên bảng chứa, vì vậy nó cũng hoạt động tốt trong IE9 (nếu bạn sử dụng chiều rộng tối đa).

Như đã nói, bạn có thể sử dụng td { display: block; }nhưng điều này đánh bại mục đích sử dụng bảng.

Bạn có thể sử dụng table { table-layout: fixed; }nhưng có thể bạn muốn nó hoạt động khác nhau đối với một số thuộc địa.

Vì vậy, cách tốt nhất để đạt được những gì bạn muốn là bọc văn bản của bạn <div>và áp dụng CSS của bạn cho <div>(không phải <td>) như thế này:

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Hãy thử sử dụng max-widththay vìwidth , bảng vẫn sẽ tự động tính toán chiều rộng.

Hoạt động ngay cả trong ie11(với chế độ tương thích eg8).

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle .

Trang demo

Đối với các bảng có chiều rộng động, tôi tìm thấy cách bên dưới để tạo ra kết quả thỏa mãn. Mỗi <th>cái được mong muốn có khả năng cắt xén văn bản nên có một phần tử gói bên trong bao bọc nội dung <th>cho phép text-overflowhoạt động.

Bí quyết thực sự là đặt max-width(trên <th>) theo vwđơn vị .

Điều này sẽ có hiệu quả làm cho chiều rộng của phần tử bị "ràng buộc" với chiều rộng của khung nhìn (cửa sổ trình duyệt) và sẽ dẫn đến việc cắt nội dung phản hồi. Đặt các vwđơn vị thành một giá trị thỏa mãn cần thiết.

CSS tối thiểu:

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Đây là bản demo có thể chạy được:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

Chỉ cần đưa ra một giải pháp thay thế là tôi có vấn đề này và không có câu trả lời nào khác ở đây có hiệu quả mong muốn tôi muốn. Vì vậy, thay vì tôi sử dụng một danh sách. Bây giờ về mặt ngữ nghĩa, thông tin tôi đưa ra có thể được coi là cả dữ liệu dạng bảng nhưng cũng là dữ liệu được liệt kê.

Vì vậy, cuối cùng những gì tôi đã làm là:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

Vì vậy, về cơ bản ullà table, lilà tr, và spanlàtd .

Sau đó, trong CSS tôi đặt các spanphần tử thành display:block;và float:left;(tôi thích sự kết hợp inline-blockđó vì nó sẽ hoạt động trong các phiên bản IE cũ hơn, để xóa hiệu ứng nổi, xem: http://css-tricks.com/snippets/css/clear- sửa lỗi / ) và cũng có dấu chấm lửng:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Sau đó, tất cả những gì bạn làm là thiết lập các max-widthsnhịp của bạn và điều đó sẽ cho danh sách xuất hiện một bảng.

Thay vì sử dụng dấu chấm lửng để giải quyết vấn đề tràn văn bản, tôi thấy rằng một đầu vào bị vô hiệu hóa và kiểu dáng trông tốt hơn và vẫn cho phép người dùng xem và chọn toàn bộ chuỗi nếu họ cần.

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

Nó trông giống như một trường văn bản nhưng có thể nổi bật để thân thiện với người dùng hơn

Kiểm tra box-sizingtài sản css của các tdyếu tố của bạn . Tôi đã có vấn đề với mẫu css mà đặt nó thành border-boxgiá trị. Bạn cần thiết lập box-sizing: content-box.

Để lại bàn của bạn như chúng là. Chỉ cần bọc nội dung bên trong TD với một khoảng có CSS ​​cắt ngắn được áp dụng.

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Nếu bạn không muốn đặt chiều rộng tối đa thành td (như trong câu trả lời này ), bạn có thể đặt chiều rộng tối đa thành div:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

Lưu ý: 100% không hoạt động, nhưng 99% thực hiện thủ thuật trong FF. Các trình duyệt hiện đại khác không cần hack div ngớ ngẩn.

td {
  viền: 1px màu đen;
    đệm-trái: 5px;
    đệm-phải: 5px;
}
td> div {
    chiều rộng tối đa: 99%;
    tràn: ẩn;
    tràn văn bản: dấu chấm lửng;
    khoảng trắng: nowrap;

}