Làm cách nào để đặt văn bản không có khoảng trắng bên trong <td>?

Tôi đã sử dụng:

word-break:break-all;
table-layout:fixed;

và văn bản kết thúc trong Chrome chứ không phải Firefox.

Cập nhật: Tôi quyết định thay đổi thiết kế để nó không cần bọc; cố gắng sắp xếp một bản sửa lỗi / hack CSS tỏ ra quá bực bội và tốn thời gian.

Hãy thử cái này, tôi nghĩ cái này sẽ hiệu quả với những thứ như "AAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" sẽ sản xuất

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Tôi đã lấy ví dụ của mình từ một vài trang web khác nhau trên Google. Tôi đã thử nghiệm điều này trên ff 5.0, IE 8.0 và Chrome 10.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Sử dụng CSS3 word-wrap: break-word;. Hoạt động trên các trình duyệt dựa trên WebKit (Safari, Chrome).

Cập nhật : Tôi đã quên, phần tử được đề cập tuy nhiên phải được định vị ngầm hoặc rõ ràng là phần tử cố định hoặc được hiển thị dưới dạng phần tử khối. Đối với các ô trong bảng ( td), hãy sử dụng display: inline-block;.

Đây là phiên bản nâng cao của những gì OP yêu cầu.

Đôi khi, những gì xảy ra là, khách hàng của chúng tôi muốn chúng tôi đưa ra dấu '-' sau khi ngắt từ đến cuối dòng.

Giống

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

phá bỏ để

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Vì vậy, có thuộc tính CSS mới nếu được hỗ trợ, thường được hỗ trợ trong các trình duyệt mới nhất.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Tôi đang sử dụng cái này.

Tôi hy vọng ai đó sẽ có nhu cầu như thế này.

Đối với bố cục bảng tự động, hãy thử tạo kiểu td liên quan kết hợp các thuộc tính max-width và word-wrap.

Ví dụ: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Đã thử nghiệm trên Firefox 32, Chrome 37 và IE11.

Bạn có thể chèn các khoảng trắng có độ rộng bằng không (& # 8203;) theo cách thủ công để tạo các điểm ngắt.

Đặt chiều rộng cột cho tdthẻ.

Tôi nghĩ rằng đây là một vấn đề lâu dài trong Firefox, có liên quan đến Mozilla và Netscape. Tôi cá là bạn đang gặp vấn đề với việc hiển thị các URL dài. Tôi nghĩ rằng đó là một vấn đề với công cụ kết xuất hơn là một cái gì đó bạn có thể khắc phục bằng CSS, mà không có một số hack xấu xí.

Có ý nghĩa khi thay đổi thiết kế.

Điều này có vẻ hy vọng mặc dù: http://hacks.mozilla.org/2009/06/word-wrap/

Tôi đang sử dụng Angular cho dự án của mình và đã quản lý để giải quyết vấn đề này bằng một bộ lọc đơn giản:

Bản mẫu:

<td>{{string | wordBreak}}</td>

Bộ lọc:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

Bạn không thể nhìn thấy nó, nhưng sau $1đó có một khoảng trống vô hình (cảm ơn @kingjeffrey về mẹo), cho phép ngắt từ cho các ô trong bảng.

Một cách hơi khó để làm điều này là xử lý văn bản để thêm khoảng cách giữa mỗi chữ cái. Thay thế khoảng trắng bằng  Sau đó sử dụng thuộc tính css khoảng cách giữa các chữ cái để giảm khoảng cách.

Tôi biết, đó là một vụ hack ... nhưng nếu KHÔNG CÓ GÌ khác hoạt động, nó sẽ kết thúc mà không có vấn đề gì.