Word-quấn trong một bảng HTML

Tôi đã sử dụng word-wrap: break-wordđể bọc văn bản trong divs và spans. Tuy nhiên, nó dường như không hoạt động trong các ô của bảng. Tôi có một bảng được đặt thành width:100%, với một hàng và hai cột. Văn bản trong các cột, mặc dù được cách điệu với ở trên word-wrap, không bao bọc. Nó làm cho văn bản đi qua giới hạn của tế bào. Điều này xảy ra trên Firefox, Google Chrome và Internet Explorer.

Đây là những gì nguồn trông như:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Từ dài ở trên lớn hơn giới hạn trang của tôi, nhưng nó không vi phạm với HTML ở trên. Tôi đã thử các đề xuất dưới đây để thêm text-wrap:suppressvà text-wrap:normal, nhưng không giúp được gì.

Các công việc sau đây cho tôi trong Internet Explorer. Lưu ý việc thêm table-layout:fixedthuộc tính CSS

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

<td style="word-break:break-all;">longtextwithoutspace</td>

hoặc là

<span style="word-break:break-all;">longtextwithoutspace</span>

Một cú sút xa, nhưng hãy kiểm tra kỹ với Fireorms (hoặc tương tự) mà bạn không vô tình thừa hưởng quy tắc sau:

white-space:nowrap;

Điều này có thể ghi đè hành vi ngắt dòng được chỉ định của bạn.

Hóa ra không có cách nào tốt để làm điều này. Gần nhất tôi đến là thêm "tràn: ẩn;" để div xung quanh bàn và mất văn bản. Các giải pháp thực sự có vẻ là để mương bảng mặc dù. Sử dụng div và định vị tương đối tôi có thể đạt được hiệu ứng tương tự, trừ đi di sản của<table>

CẬP NHẬT 2015: Đây là dành cho những người như tôi muốn câu trả lời này. Sau 6 năm, điều này hoạt động, nhờ tất cả những người đóng góp.

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

Như đã đề cập, đặt văn bản trong divhầu hết các công trình. Bạn chỉ cần xác định widthcủa div, đó là may mắn cho các bố cục mà là tĩnh.

Điều này hoạt động trên FF 3.6, IE 8, Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Giải pháp sử dụng gói tràn và hoạt động tốt với bố trí bảng bình thường + chiều rộng bảng 100%

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Những lợi ích:

• Sử dụng overflow-wrap:break-wordthay vì word-break:break-all. Điều này tốt hơn bởi vì nó cố gắng phá vỡ khoảng trắng trước và chỉ cắt từ nếu từ đó lớn hơn từ chứa.
• Không table-layout:fixedcần thiết. Sử dụng kích thước tự động thường xuyên của bạn.
• Không cần thiết để xác định cố định widthhoặc cố định max-widthbằng pixel. Xác định %cha mẹ nếu cần.

Đã thử nghiệm trong FF57, Chrome62, IE11, Safari11

Thay đổi mã của bạn

word-wrap: break-word;

đến

word-break:break-all;

Thí dụ

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Vấn đề với

<td style="word-break:break-all;">longtextwithoutspace</td>

là nó sẽ hoạt động không tốt khi văn bản có một số khoảng trắng, vd

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Nếu từ vừa andthenlongerwithoutspacesvới ô bảng trong một dòng nhưng long text with andthenlongerwithoutspaceskhông, từ dài sẽ bị chia làm hai, thay vì được bọc.

Giải pháp thay thế: chèn U + 200B ( ZWSP ), U + 00AD ( gạch nối mềm ) hoặc U + 200C ( ZWNJ ) trong mỗi từ dài sau mỗi ký tự thứ 20 (tuy nhiên, xem cảnh báo bên dưới):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Cảnh báo : chèn thêm các ký tự có độ dài bằng không ảnh hưởng đến việc đọc. Tuy nhiên, nó cũng ảnh hưởng đến văn bản được sao chép vào clipboard (tất nhiên các ký tự này cũng được sao chép). Nếu văn bản clipboard sau đó được sử dụng trong một số chức năng tìm kiếm trong ứng dụng web ... thì việc tìm kiếm sẽ bị phá vỡ. Mặc dù giải pháp này có thể được nhìn thấy trong một số ứng dụng web nổi tiếng, tránh nếu có thể.

Cảnh báo : khi chèn các ký tự bổ sung, bạn không nên tách nhiều điểm mã trong grapheme. Xem https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries để biết thêm.

Kiểm tra bản demo này

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Đây là đường dẫn để đọc

Đã thử nghiệm trong IE 8 và Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Điều này làm cho bảng phù hợp với chiều rộng của trang và mỗi cột chiếm 50% chiều rộng.

Nếu bạn thích cột đầu tiên chiếm nhiều trang hơn, hãy thêm một width: 80%cột tdnhư trong ví dụ sau, thay thế 80% bằng tỷ lệ phần trăm bạn chọn.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Điều duy nhất cần được thực hiện là thêm chiều rộng cho <td>hoặc <div>bên trong <td>tùy thuộc vào bố cục bạn muốn đạt được.

ví dụ:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

hoặc là

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

Câu trả lời giành được tiền thưởng là chính xác, nhưng nó không hoạt động nếu hàng đầu tiên của bảng có một ô được hợp nhất / được nối (tất cả các ô có chiều rộng bằng nhau).

Trong trường hợp này, bạn nên sử dụng các thẻ colgroupvà colđể hiển thị đúng:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Có vẻ như bạn cần đặt word-wrap:break-word;trên một phần tử khối ( div), với chiều rộng được chỉ định (không tương đối). Ví dụ:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

hoặc sử dụng word-break:break-alltheo đề nghị của Abhishek Simon.

Điều này làm việc cho tôi:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

Và thuộc tính bảng là:

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

Nếu bạn không cần viền bảng, hãy áp dụng điều này:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Tôi đã tìm thấy một giải pháp có vẻ hoạt động trong Firefox, Google Chrome và Internet Explorer 7-9. Để thực hiện bố trí bảng hai cột với văn bản dài ở một bên. Tôi đã tìm kiếm tất cả các vấn đề tương tự, và những gì hoạt động trong một trình duyệt đã phá vỡ trình duyệt kia hoặc thêm nhiều thẻ vào một bảng có vẻ như mã hóa xấu.

Tôi KHÔNG sử dụng bảng cho việc này. DL DT DD đến giải cứu. Ít nhất là để sửa một bố cục hai cột, về cơ bản đó là một thiết lập bảng chú giải / từ điển / từ có nghĩa.

Và một số kiểu dáng chung.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

Sử dụng chữ nổi và lề trái, tôi nhận được chính xác những gì tôi cần. Chỉ cần nghĩ rằng tôi chia sẻ điều này với những người khác, có thể nó sẽ giúp người khác có bố cục kiểu định nghĩa hai cột, gặp khó khăn khi phải dùng từ.

Tôi đã thử sử dụng word-quấn trong ô bảng, nhưng nó chỉ hoạt động trong Internet Explorer 9, (dĩ nhiên cả Firefox và Google Chrome) chủ yếu cố gắng sửa trình duyệt Internet Explorer bị hỏng ở đây.

Các bảng được bọc theo mặc định, vì vậy hãy đảm bảo hiển thị các ô của bảng là table-cell:

td {
   display: table-cell;
}

style = "bảng-layout: fixed; width: 98%; word-quấn: break-word"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Bản trình diễn - http://jsfiddle.net/Ne4BR/749/

Nó hiệu quả tuyệt vời đối với tôi. Tôi đã có các liên kết dài sẽ khiến bảng vượt quá 100% trên các trình duyệt web. Đã thử nghiệm trên IE, Chrome, Android và Safari.

Một giải pháp hoạt động với Google Chrome và Firefox (không được thử nghiệm với Internet Explorer) là đặt thành display: table-cellphần tử khối.

Bạn có thể thử điều này nếu nó phù hợp với bạn ...

Đặt một textarea bên trong td của bạn và vô hiệu hóa nó với màu nền trắng và xác định số lượng hàng của nó.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>