Các bảng Bootstrap tràn ngập với văn bản dài không gian

Question

Tôi đang sử dụng Bootstrap và tôi có một bảng với một vài cột, phần cuối cùng đôi khi có một đoạn văn bản dài không có dấu cách. Tôi nhận thấy rằng dưới các kích thước màn hình nhất định, bảng sẽ tràn div cha của nó và tạo ra sự chồng chéo xấu xí với bảng anh chị em của nó.

Tôi đã chơi xung quanh với nó và tôi nghĩ rằng vấn đề phải làm với văn bản không được định vị. Tôi đã tạo ra một jsfiddle thể hiện ý tôi.

Như bạn có thể thấy, bảng trên cùng bên trái trên cùng là hành vi tốt và chỉ đơn giản là phát triển theo chiều dọc để chứa nhiều văn bản hơn. Tuy nhiên, bảng dưới cùng bên trái dẫn đến một tràn trên bên phải do các văn bản dài không gian và cột bên phải của bảng dưới cùng bên trái gió lên "dưới" anh chị em của nó.

Có ai có bất kỳ mẹo nào về cách tôi có thể sửa lỗi này để văn bản rất dài bị cắt bớt hoặc bị chia nhỏ thành một dòng mới không?

Answer 1

Thêm phong cách sau đây để bạn <table>

.the-table { 
    table-layout: fixed; 
    word-wrap: break-word; 
} 

Sau đó, bạn có thể điều chỉnh bố trí của bạn qua CSS như bạn muốn.

Answer 2

này hoạt động mà không buộc bố trí bảng để được cố định Chỉ cần thêm nó vào td hoặc bất kỳ

.is-breakable { 
    word-break: break-word; 
} 

Answer 3

Bạn có thể sử dụng dưới đây css. Điều này sẽ bao bọc văn bản và áp dụng ... ở cuối văn bản.

ví dụ: This_is_a_large_text sẽ được đổi thành This_is_a_lar ...

td { 
    max-width: 120px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Bạn cũng có thể thêm mẹo công cụ để hiển thị giá trị văn bản hoàn chỉnh.

<td data-toggle="tooltip" title="${text}">${text}</td> 

Answer 4

Tôi đang gặp sự cố với các giải pháp này hoạt động trong Internet Explorer.

Tôi đã sử dụng kiểu sau để làm cho nó hoạt động.

<td style="word-break: break-all">