ฉันจะตัดข้อความโดยไม่มีช่องว่างภายใน <td> ได้อย่างไร

ฉันเคยใช้:

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

และข้อความจะรวมอยู่ใน Chrome แต่ไม่ใช่ Firefox

อัปเดต: ฉันตัดสินใจที่จะเปลี่ยนการออกแบบดังนั้นจึงไม่จำเป็นต้องห่อ การพยายามจัดการแก้ไข CSS / แฮ็กนั้นพิสูจน์แล้วว่าน่าผิดหวังและใช้เวลานานเกินไป

ลองดูสิฉันคิดว่ามันจะใช้ได้กับบางอย่างเช่น "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGG"

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

ฉันได้นำตัวอย่างของฉันมาจากเว็บไซต์สองแห่งบน Google ฉันได้ทดสอบสิ่งนี้บน ff 5.0, IE 8.0 และ 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>

ใช้ word-wrap: break-word;CSS3 ทำงานในเบราว์เซอร์ที่ใช้ WebKit (Safari, Chrome) เช่นกัน

อัปเดต : ฉันลืมไปว่าองค์ประกอบที่เป็นปัญหาต้องอยู่ในตำแหน่งโดยนัยหรืออย่างชัดเจนเป็นองค์ประกอบคงที่หรือแสดงเป็นองค์ประกอบบล็อก สำหรับเซลล์ตาราง ( td) display: inline-block;การใช้งาน

นี่คือเวอร์ชันขั้นสูงของสิ่งที่ OP ถาม

บางครั้งสิ่งที่เกิดขึ้นคือลูกค้าของเราต้องการให้เราให้ '-' หลังจากแบ่งคำจนจบบรรทัด

ชอบ

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

แตกไป

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

ดังนั้นจึงมีคุณสมบัติ CSS ใหม่หากได้รับการสนับสนุนโดยปกติจะได้รับการสนับสนุนในเบราว์เซอร์ล่าสุด

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

}

ฉันใช้อันนี้

ฉันหวังว่าใครบางคนจะมีความต้องการเช่นนี้

สำหรับเค้าโครงตารางอัตโนมัติให้ลองจัดรูปแบบ td ที่เกี่ยวข้องโดยรวมแอตทริบิวต์ max-width และ word-wrap

เช่น: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

ทดสอบใน Firefox 32, Chrome 37 และ IE11

คุณสามารถฉีดช่องว่างความกว้างเป็นศูนย์ (& # 8203;) ด้วยตนเองเพื่อสร้างจุดพัก

กำหนดความกว้างของคอลัมน์สำหรับtdแท็ก

ฉันคิดว่านี่เป็นปัญหาที่ยาวนานใน Firefox ซึ่งย้อนกลับไปที่ Mozilla และ Netscape ฉันจะพนันได้เลยว่าคุณกำลังมีปัญหากับการแสดง URL แบบยาว ฉันคิดว่ามันเป็นปัญหากับเอนจิ้นการเรนเดอร์มากกว่าสิ่งที่คุณสามารถแก้ไขได้ด้วย CSS โดยไม่มีแฮ็กที่น่าเกลียด

มีเหตุผลที่จะเปลี่ยนการออกแบบ

สิ่งนี้ดูมีความหวัง: http://hacks.mozilla.org/2009/06/word-wrap/

ฉันใช้ Angular สำหรับโปรเจ็กต์ของฉันและจัดการเพื่อแก้ปัญหานี้ด้วยตัวกรองง่ายๆ:

แม่แบบ:

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

กรอง:

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

คุณมองไม่เห็น แต่หลังจาก$1มีช่องว่างที่มองไม่เห็น (ขอบคุณ @kingjeffrey สำหรับเคล็ดลับ) ซึ่งเปิดใช้งานการแบ่งคำสำหรับเซลล์ตาราง

วิธีหนึ่งที่แฮ็กเล็กน้อยคือการประมวลผลข้อความเพื่อเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัว แทนที่ช่องว่างด้วย แล้วใช้แอตทริบิวต์ css ระยะห่างตัวอักษรเพื่อลดช่องว่าง

ฉันรู้ว่ามันเป็นการแฮ็ก ... แต่ถ้าไม่มีอะไรใช้งานได้ก็ควรตัดโดยไม่มีปัญหา