ตัดคำในตาราง HTML

ฉันใช้คำword-wrap: break-wordสั่งตัดคำในdivs และspans อย่างไรก็ตามดูเหมือนว่าจะไม่ทำงานในเซลล์ตาราง ฉันมีตารางตั้งค่าwidth:100%โดยมีหนึ่งแถวและสองคอลัมน์ ข้อความในคอลัมน์แม้ว่าจะมีสไตล์ด้านบนword-wrapแต่ก็ไม่ได้ห่อ ทำให้ข้อความผ่านขอบเขตของเซลล์ สิ่งนี้เกิดขึ้นกับ Firefox, Google Chrome และ Internet Explorer

นี่คือลักษณะที่มา:

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>

คำที่ยาวด้านบนมีขนาดใหญ่กว่าขอบเขตของหน้าเว็บของฉัน แต่ไม่ได้ตัดกับ HTML ด้านบน ฉันลองทำตามคำแนะนำด้านล่างเพื่อเพิ่มtext-wrap:suppressและtext-wrap:normalแต่ก็ไม่ได้ช่วยอะไร

การทำงานต่อไปนี้สำหรับฉันใน Internet Explorer สังเกตการเพิ่มtable-layout:fixedแอตทริบิวต์ 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>

หรือ

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

ยิงยาว แต่ตรวจสอบอีกครั้งด้วยFirebug (หรือคล้ายกัน) ว่าคุณไม่ได้รับสืบทอดกฎต่อไปนี้โดยไม่ได้ตั้งใจ:

white-space:nowrap;

สิ่งนี้อาจแทนที่พฤติกรรมการขึ้นบรรทัดใหม่ตามที่คุณระบุ

ปรากฎว่าไม่มีวิธีที่ดีในการทำเช่นนี้ ฉันมาใกล้ที่สุดคือการเพิ่ม "ล้น: ซ่อน;" เพื่อ div รอบโต๊ะและการสูญเสียข้อความ ทางออกที่แท้จริงน่าจะเป็นตารางคูแม้ว่า การใช้ divs และการจัดตำแหน่งสัมพัทธ์ฉันสามารถบรรลุผลเดียวกันลบด้วย<table>

2015 อัปเดต:นี่สำหรับคนอย่างฉันที่ต้องการคำตอบนี้ หลังจากผ่านไป 6 ปีผลงานนี้ต้องขอบคุณผู้มีส่วนร่วมทุกคน

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

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

ดังที่กล่าวไว้การวางข้อความภายในdivเกือบจะใช้งานได้ คุณเพียงแค่ต้องระบุwidthของdivซึ่งเป็นโชคดีสำหรับรูปแบบที่คงที่

ใช้งานได้กับ FF 3.6, IE 8, Chrome

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

วิธีแก้ปัญหาที่ใช้โอเวอร์โฟลว์แรปและใช้งานได้ดีกับเค้าโครงตารางปกติ + ความกว้างของตาราง 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;
}

ประโยชน์ที่ได้รับ:

• ใช้overflow-wrap:break-wordแทนword-break:break-allแทนซึ่งดีกว่าเพราะพยายามแบ่งช่องว่างก่อนและตัดคำออกเฉพาะในกรณีที่คำนั้นใหญ่กว่าที่เก็บ
• ไม่table-layout:fixedต้องการ ใช้การปรับขนาดอัตโนมัติตามปกติของคุณ
• ไม่จำเป็นต้องกำหนดตายตัวwidthหรือกำหนดเป็นmax-widthพิกเซล กำหนด%ผู้ปกครองหากจำเป็น

ทดสอบใน FF57, Chrome62, IE11, Safari11

เปลี่ยนรหัสของคุณ

word-wrap: break-word;

ถึง

word-break:break-all;

ตัวอย่าง

<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>

มีปัญหากับ

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

คือมันจะทำงานได้ไม่ดีนักเมื่อข้อความมีช่องว่างเช่น

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

หากคำว่าandthenlongerwithoutspacesพอดีกับเซลล์ของตารางในหนึ่งบรรทัด แต่long text with andthenlongerwithoutspacesไม่ได้คำยาวจะถูกแบ่งออกเป็นสองส่วนแทนที่จะถูกห่อ

ทางเลือกอื่น: ใส่ U + 200B ( ZWSP ), U + 00AD ( ยัติภังค์อ่อน ) หรือ U + 200C ( ZWNJ ) ในทุก ๆ คำพูดยาว ๆ ทุกครั้งพูดตัวอักษรที่ 20 (ดูคำเตือนด้านล่าง):

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>

คำเตือน : การใส่อักขระที่มีความยาวเป็นศูนย์เพิ่มเติมจะไม่มีผลต่อการอ่าน อย่างไรก็ตามจะมีผลกับข้อความที่คัดลอกไปยังคลิปบอร์ด (แน่นอนว่าตัวละครเหล่านี้คัดลอกมาด้วย) หากมีการใช้ข้อความคลิปบอร์ดในภายหลังในฟังก์ชั่นการค้นหาบางอย่างในแอปพลิเคชันเว็บ ... การค้นหาจะไม่สามารถใช้งานได้ แม้ว่าวิธีนี้สามารถเห็นได้ในเว็บแอปพลิเคชันที่รู้จักกันดีบางอย่างให้หลีกเลี่ยงถ้าเป็นไปได้

คำเตือน : เมื่อแทรกอักขระเพิ่มเติมคุณไม่ควรแยกจุดโค้ดหลาย ๆ จุดภายในกราฟิก ดูhttps://unicode.org/reports/tr29/#Grapheme_Cluster_Boundariesสำหรับข้อมูลเพิ่มเติม

ลองชมตัวอย่างนี้

   <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>

นี่คือลิงค์สำหรับอ่าน

ทดสอบใน IE 8 และ 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>

สิ่งนี้ทำให้ตารางพอดีกับความกว้างของหน้าและแต่ละคอลัมน์จะรับ 50% ของความกว้าง

หากคุณต้องการคอลัมน์แรกที่จะใช้มากขึ้นของหน้าเพิ่มwidth: 80%ไปtdดังตัวอย่างต่อไปนี้แทน 80% ด้วยอัตราร้อยละที่คุณเลือก

<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>

สิ่งเดียวที่ต้องทำคือการเพิ่มความกว้างให้กับ<td>หรือ<div>ภายใน<td>ขึ้นอยู่กับรูปแบบที่คุณต้องการบรรลุ

เช่น:

<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>

หรือ

 <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>

คำตอบที่ชนะเงินรางวัลนั้นถูกต้อง แต่จะไม่ทำงานหากแถวแรกของตารางมีเซลล์ที่รวม / รวมเข้าด้วยกัน (ทั้งหมดจะได้รับความกว้างเท่ากัน)

ในกรณีนี้คุณควรใช้colgroupและcolแท็กเพื่อแสดงอย่างถูกต้อง:

<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>

ดูเหมือนว่าคุณจำเป็นต้องตั้งค่าword-wrap:break-word;องค์ประกอบบล็อก ( div) พร้อมความกว้าง (ไม่ใช่แบบญาติ) ที่ระบุ Ex:

<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>

หรือใช้word-break:break-allตามคำแนะนำของ Abhishek Simon

สิ่งนี้ใช้ได้กับฉัน:

<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;
    }

และแอตทริบิวต์ของตารางคือ:

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

</style>

หากคุณไม่ต้องการเส้นขอบตารางให้ใช้สิ่งนี้:

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

ฉันพบโซลูชันที่ดูเหมือนจะใช้งานได้ใน Firefox, Google Chrome และ Internet Explorer 7-9 สำหรับการทำเค้าโครงตารางสองคอลัมน์ที่มีข้อความยาวอยู่ด้านหนึ่ง ฉันค้นหาปัญหาที่คล้ายกันทั้งหมดและสิ่งที่ทำงานในเบราว์เซอร์หนึ่งทำให้อีกอันหนึ่งเสียหายหรือการเพิ่มแท็กเพิ่มเติมลงในตารางดูเหมือนจะเป็นการเข้ารหัสที่ไม่ดี

ฉันไม่ได้ใช้ตารางสำหรับสิ่งนี้ DL DT DD เพื่อช่วยเหลือ อย่างน้อยสำหรับการแก้ไขเลย์เอาต์แบบสองคอลัมน์นั่นเป็นอภิธานศัพท์ / พจนานุกรม / การตั้งค่าความหมายคำ

และสไตล์ทั่วไปบางอย่าง

    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>

เมื่อใช้การตัดคำลอยและระยะขอบซ้ายฉันได้รับสิ่งที่ฉันต้องการ แค่คิดว่าฉันจะแบ่งปันสิ่งนี้กับผู้อื่นบางทีมันอาจจะช่วยคนอื่นด้วยเค้าโครงสไตล์สองคอลัมน์ที่มีปัญหาในการตัดคำ

ฉันลองใช้การตัดคำในเซลล์ตาราง แต่ใช้ได้เฉพาะใน Internet Explorer 9 (และ Firefox และ Google Chrome แน่นอน) ส่วนใหญ่พยายามแก้ไขเบราว์เซอร์ Internet Explorer ที่เสียหายที่นี่

ตารางตัดตามค่าเริ่มต้นดังนั้นตรวจสอบให้แน่ใจว่าการแสดงของเซลล์ตารางคือtable-cell:

td {
   display: table-cell;
}

style = "รูปแบบตาราง: คงที่, ความกว้าง: 98%; คำตัดคำ: หยุดพัก"

<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" >

การสาธิต - http://jsfiddle.net/Ne4BR/749/

มันใช้งานได้ดีสำหรับฉัน ฉันมีลิงค์ยาวที่จะทำให้ตารางเกินกว่า 100% สำหรับเว็บเบราว์เซอร์ ทดสอบบน IE, Chrome, Android และ Safari

โซลูชันที่ทำงานกับ Google Chrome และ Firefox (ไม่ได้ทดสอบกับ Internet Explorer) คือการตั้งค่าdisplay: table-cellเป็นองค์ประกอบบล็อก

คุณสามารถลองสิ่งนี้ถ้ามันเหมาะกับคุณ ...

ใส่ข้อความใน td ของคุณและปิดการใช้งานด้วยสีพื้นหลังสีขาวและกำหนดจำนวนแถว

<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>