tràn: bị ẩn không hoạt động khi sử dụng các bảng

Tôi đang gặp sự cố với các chuỗi văn bản kéo dài ra khỏi các bảng của mình và overflow:hidden dường như không làm những gì tôi thoát ra. Dưới đây là mã mẫu tôi đang sử dụng để kiểm tra hiệu ứng này:tràn: bị ẩn không hoạt động khi sử dụng các bảng

<html> 
    <head> 
     <style type="text/css"> 
      td.scroll 
      { 
       background-color:#00FFFF; 
       width:100px; 
       height:100px; 
       overflow:scroll; 
      } 
      td.hidden 
      { 
       background-color:#00FF00; 
       width:100px; 
       height:100px; 
       overflow:hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <table width="100%"> 
      <tr> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

Khi được tải, văn bản sẽ, bất kể chiều rộng bảng, kéo dài để hiển thị tất cả chuỗi. Những gì tôi là sau khi có bất kỳ phần nào của chuỗi mà sẽ đi qua các phép đo tế bào không được hiển thị. Điều này thậm chí có thể với các bảng, và nếu có, tôi đang làm gì sai?

Nguồn

2009-10-29 canadiancreed

Chỉ hoạt động trên các yếu tố cấp khối. Các phần tử bảng không phải là các phần tử khối. Nếu bạn muốn nhận các hiệu ứng đó, hãy đặt <div> vào trong ô trong bảng và áp dụng các hiệu ứng cho <div>.

td.scroll div { 
    background-color: #00FFFF; 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
} 

td.hidden div { 
    background-color: #00FF00; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
}

với:

<table width="100%"> 
<tr> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 
</table>

Nguồn

2009-10-29 14:45:51 cletus

Điều đó đã xảy ra. Cảm ơn rất nhiều cho điều này và tiết kiệm những gì còn lại của mái tóc của tôi! Đoán tôi cần phải đọc lên trên css của tôi một số chi tiết. – canadiancreed

Đó là một khía cạnh khá phức tạp đối với CSS. Lần duy nhất bất cứ ai tìm thấy nó là khi họ có vấn đề chính xác này. Tin tôi đi, đã làm điều đó. – cletus

CSS 2.1 nói rằng 'tràn 'hoạt động trên các ô của bảng. Tuy nhiên trong thực tế chỉ WebKit hỗ trợ di chuyển trên các ô. 'ẩn' hoạt động OK mặc dù. – bobince

-1

Không chắc chắn nếu nó không phải là nghĩa vụ phải được làm việc cho các tế bào bảng, nhưng lý tưởng bạn không thực sự muốn ẩn chúng anyway. Tôi đề nghị bạn gạch nối từ lâu, mà bạn có thể thực hiện dễ dàng với các lib sau (chỉ mất vài dòng js để thực hiện):

http://code.google.com/p/hyphenator/

Ví dụ:

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

Nguồn

2009-10-29 14:46:05

Đã nghĩ về một cái gì đó tương tự, nhưng tiếc là quyết định thiết kế không phải là tùy thuộc vào tôi. – canadiancreed

<html> 
<head> 
<style> 
td { width: 33%; height: 2em; } 
td div { width:100%;height:100%;overflow:hidden } 
</style> 

</head> 

<body> 

<table border="1" style="width:300px;"> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
</table> 

</body> 

</html>

Nguồn

2009-10-29 14:55:34 bugtussle

Theo mặc định, cơ chế tự động sắp xếp bảng mở rộng chiều rộng của bảng để phù hợp với chiều rộng nội dung ô tối thiểu. Yêu cầu bạn không làm điều đó với thuộc tính table-layout:

<table width="100%" style="table-layout: fixed">

và ví dụ của bạn hoạt động như mong đợi. Bạn có lẽ cũng nên loại bỏ các width: 100px từ các tế bào bảng, vì điều đó làm cho không có ý nghĩa kết hợp với một bảng 100% -width. (Mặc dù với bố cục bảng cố định không quan trọng, vì chỉ có hàng đầu tiên của ô hoặc <col> s có bất kỳ vòng bi nào trên chiều rộng cột.)

Lưu ý overflow: scroll hoặc auto không hoạt động đối với các ô bảng trong hầu hết các trình duyệt. (Nó có trong WebKit.)

Nguồn

2009-10-29 15:07:51 bobince

"Bố cục bảng: cố định" không thay đổi gì. Chiều cao vẫn mở rộng. Thử nghiệm trên chrome là webkit – matteo

tràn: bị ẩn không hoạt động khi sử dụng các bảng

Trả lời

Các vấn đề liên quan