Tách từ dài trong ô bảng có độ rộng phần trăm

Question

http://jsfiddle.net/L2yLe/

Fiddle nói tất cả. Tôi muốn một giải pháp css chỉ giới hạn chiều rộng của bảng với chiều rộng của div. Chuỗi dài nên bị hỏng (nhưng như bạn có thể thấy nó không phải là), và điều đó làm cho bảng tràn.

Tôi không muốn sử dụng bất kỳ độ rộng pixel nào. Điều này nên được hoàn toàn chất lỏng.

<div> 
<table> 
    <tr> 
     <td> 
      short string 
     </td> 
     <td> 
somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata 
     </td> 
     <td> 
      short string 
     </td> 
    </tr> 
</table> 
</div> 

div { 
    width: 50%; 
    background-color: darkgray; 
    padding: 15px; 
    margin: 10px auto; 
} 
table { 
    border-collapse: collapse; 
} 
td { 
    border: 1px solid black; 
} 

Answer 1

Guys hãy xem trên http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */ 
    -ms-word-break: break-all; 
    word-break: break-all; 

    /* Non standard for webkit */ 
    word-break: break-word; 

    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
    hyphens: auto; 

Answer 2

Có thuộc tính CSS3: word-wrap: break-word; ... ofc yêu cầu trình duyệt hỗ trợ CSS3.

Answer 3

viết này:

table { 
border-collapse: collapse; 
    table-layout: fixed; 
    width:100% 
} 
td { 
    border: 1px solid black; 
    word-wrap:break-word; 
} 

Kiểm tra này: http://jsfiddle.net/L2yLe/7/

Answer 4

Tôi đã chơi arround với điều này trong một thời gian, và nó không chứng minh dễ dàng chút nào.

Tôi đặt văn bản dài trong một div và từ gói đó nhưng tế bào TD vẫn đi đến chiều rộng đầy đủ mặc dù div wraped văn bản.

Tôi có giải pháp nhưng khá nhiều thứ để thêm vào bảng nhiều hàng có thể sẽ quá lớn, tôi sẽ đặt ở đây trong trường hợp bất kỳ ai khác có thể cải thiện nó, tôi không phải là nhà phát triển HTML và chỉ có bắt đầu vọc trong bản thân mình, nhưng ở đây đi

mixed table solution

tôi đã đưa văn bản lớn trong bảng khác bên trong td ban đầu và thiết lập rằng bảng để bố trí: cố định; chiều rộng 100%. cũng thêm đường viền để hiển thị những gì đang diễn ra. Của nó một chút crowbar tôi hy vọng một người nào khác có thể cải thiện nó.

Answer 5

Tôi không nghĩ rằng nó có thể phá vỡ từ bằng cách sử dụng css. Bạn sẽ có thể tính toán số lượng ký tự khi tìm nạp dữ liệu và sau đó chèn thẻ span xung quanh các phần của văn bản nếu nó vượt quá số lượng ký tự không phá vỡ được xác định trước. Việc hiển thị mặc định của các trình duyệt sau đó sẽ đặt nội tuyến trải dài bên cạnh nhau nếu có đủ không gian, hoặc đột nhập vào dòng tiếp theo nếu không có.

Answer 6

Giải pháp của tôi hơi xấu xí. nhưng nó hoạt động rất tốt. Sử dụng JS hoặc bất kỳ thứ gì đang phát ra html của bạn, bạn có thể đặt <wbr> giữa mỗi ký tự X của văn bản. Điều này cho phép trình duyệt đưa ra quyết định về thời điểm ngắt lời, nhưng trực quan, nó sẽ xuất hiện dưới dạng một chuỗi nếu nó phù hợp trong ô bảng.

Answer 7

Thêm "word-break: break-all;" sẽ làm việc!

Xem trang này Example.