Tại sao tràn: ẩn không hoạt động trong <td>?

Tôi đã có một ô bảng mà tôi luôn muốn có chiều rộng cụ thể. Tuy nhiên, nó không hoạt động với các chuỗi văn bản lớn không phân biệt. Đây là một trường hợp thử nghiệm:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Làm thế nào để tôi có thể cắt văn bản ở cạnh hộp, thay vì mở rộng hộp?

Đây là vấn đề tương tự .

Bạn cần đặt table-layout:fixed và độ rộng phù hợp trên thành phần bảng, cũng như overflow:hiddenvà white-space: nowraptrên các ô của bảng.

Ví dụ

Cột chiều rộng cố định

Chiều rộng của bảng phải bằng (hoặc nhỏ hơn) so với các ô có chiều rộng cố định.

Với một cột có chiều rộng cố định:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Với nhiều cột chiều rộng cố định:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Cột chiều rộng cố định và chất lỏng

Một chiều rộng cho bảng phải được đặt , nhưng bất kỳ chiều rộng thêm nào chỉ đơn giản được lấy bởi các tế bào chất lỏng.

Với nhiều cột, chiều rộng cố định và chiều rộng chất lỏng:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Đó chỉ là cách của TD. Tôi tin rằng có thể là do thuộc tính 'hiển thị' của phần tử TD vốn được đặt thành 'ô bảng' thay vì 'khối'.

Trong trường hợp của bạn, giải pháp thay thế có thể là bọc nội dung của TD trong DIV và áp dụng chiều rộng và tràn cho DIV.

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

Có thể có một số vấn đề về đệm hoặc di động để giải quyết, và tốt hơn hết là bạn nên loại bỏ các kiểu nội tuyến và sử dụng css bên ngoài, nhưng đây nên là một sự khởi đầu.

Áp dụng CSS table-layout:fixed;(và đôi khi width:<any px or %>) cho BẢNG và white-space: nowrap; overflow: hidden;kiểu trên TD. Sau đó đặt độ rộng CSS trên các thành phần ô hoặc cột chính xác .

Đáng kể, chiều rộng cột bảng bố trí cố định được xác định bởi chiều rộng ô trong hàng đầu tiên của bảng. Nếu có các phần tử TH ở hàng đầu tiên và chiều rộng được áp dụng cho TD (chứ không phải TH), thì chiều rộng chỉ áp dụng cho nội dung của TD (khoảng trắng và tràn có thể bị bỏ qua); các cột trong bảng sẽ phân phối đồng đều bất kể chiều rộng TD đã đặt (vì không có chiều rộng được chỉ định [trên TH ở hàng đầu tiên]) và các cột sẽ có [tính] chiều rộng bằng nhau; bảng sẽ không tính toán lại chiều rộng cột dựa trên chiều rộng TD trong các hàng tiếp theo. Đặt chiều rộng trên các thành phần ô đầu tiên mà bảng sẽ gặp.

Ngoài ra, và cách an toàn nhất để đặt độ rộng cột là sử dụng <COLGROUP>và <COL>các thẻ trong bảng với độ rộng CSS được đặt trên mỗi chiều rộng cố định COL. CSS có liên quan đến chiều rộng ô sẽ đẹp hơn khi bảng biết trước độ rộng của cột.

Tôi không quen thuộc với vấn đề cụ thể, nhưng bạn có thể dính một div, v.v. vào bên trong td và đặt tràn vào đó.

Vâng đây là một giải pháp cho bạn nhưng tôi không thực sự hiểu tại sao nó hoạt động:

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

Cụ thể, gói nội dung ô trong một div.

Giải pháp tốt nhất là đặt div vào ô có độ rộng bằng không. Các ô của bảng Tbody sẽ kế thừa chiều rộng của chúng từ các chiều rộng được xác định. Vị trí: lề tương đối và tiêu cực nên thực hiện các mẹo!

Đây là một ảnh chụp màn hình: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>

Bạn sẽ phải đặt các thuộc tính kiểu của bảng: widthvà table-layout: fixed;để 'tràn: ẩn;' thuộc tính hoạt động đúng.

Imo điều này hoạt động tốt hơn sau đó sử dụng div với widththuộc tính style, đặc biệt là khi sử dụng nó để tính toán thay đổi kích thước động, bảng sẽ có DOM đơn giản hơn giúp thao tác dễ dàng hơn vì không cần chỉnh sửa phần đệm và lề

Ngoài ra, bạn không phải đặt chiều rộng cho tất cả các ô mà chỉ cho các ô ở hàng đầu tiên.

Như thế này:

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>

Tôi vừa gặp một vấn đề tương tự, lúc đầu phải sử dụng <div>bên trong <td>(giải pháp của John MacIntyre không hiệu quả với tôi vì nhiều lý do).

Lưu ý rằng mặc dù <td><div>...</div></td>không phải là vị trí hợp lệ cho một div để thay vào đó tôi đang sử dụng một <span>với display:block;quy định. Nó xác nhận tốt bây giờ và làm việc.

Giải pháp dễ nhất và đơn giản nhất có hiệu quả:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

để đơn giản hơn, tôi đề xuất đặt một textarea bên trong td wich được quản lý tự động tràn

<td><textarea autofocus>$post_title</textarea></td>

cần phải được cải thiện

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

hiển thị 123456