จะป้องกันไม่ให้คำพูดยาว ๆ แตกหัก div ของฉันได้อย่างไร

นับตั้งแต่เปลี่ยนจากเค้าโครงตารางเป็นเค้าโครง DIV ปัญหาทั่วไปที่หนึ่งยังคงอยู่:

ปัญหา : คุณเติม DIV ของคุณด้วยข้อความแบบไดนามิกและย่อมมีคำยาวมากที่ทอดยาวเกินขอบคอลัมน์ div ของคุณและทำให้ไซต์ของคุณดูไม่เป็นมืออาชีพ

RETRO-WHINING : สิ่งนี้ไม่เคยเกิดขึ้นกับเค้าโครงตาราง เซลล์ตารางจะขยายไปยังความกว้างของคำที่ยาวที่สุดเสมอ

SEVERITY : ฉันเห็นปัญหานี้ในเว็บไซต์ที่สำคัญที่สุดโดยเฉพาะในเว็บไซต์เยอรมันที่แม้แต่คำทั่วไปเช่น "จำกัด ความเร็ว" นั้นยาวมาก ("Geschwindigkeitsbegrenzung")

ใครบ้างมีวิธีแก้ปัญหาที่ใช้การได้นี้?

ยัติภังค์อ่อน

คุณสามารถบอกเบราว์เซอร์ว่าจะแยกคำศัพท์ยาว ๆ โดยการใส่เครื่องหมายยัติภังค์ ( ­):

averyvery­longword

อาจแสดงผลเป็น

averyverylongword

หรือ

averyvery-
longword

นิพจน์ทั่วไปที่ดีสามารถทำให้แน่ใจได้ว่าคุณจะไม่แทรกพวกเขาเว้นแต่ว่าจำเป็น:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

เบราว์เซอร์และเครื่องมือค้นหาฉลาดพอที่จะละเว้นอักขระนี้เมื่อค้นหาข้อความและ Chrome และ Firefox (ยังไม่ได้ทดสอบคนอื่น) ละเว้นเมื่อคัดลอกข้อความไปยังคลิปบอร์ด

<wbr> ธาตุ

ตัวเลือกอื่นคือการฉีด<wbr>อดีตIE-ismซึ่งขณะนี้อยู่ใน HTML5 :

averyvery<wbr>longword

พักโดยไม่มีขีดกลาง:

เอเวอรี่
longword

คุณสามารถทำได้เหมือนกันด้วยอักขระเว้นวรรคที่มีความกว้างเป็นศูนย์​(หรือ&#x200B )

FYI ยังรองรับCSShyphens: autoโดย IE ล่าสุด Firefox และ Safari ( แต่ไม่ใช่ Chrome ):

div.breaking {
  hyphens: auto;
}

อย่างไรก็ตามการใส่ไฮเฟ็นนั้นขึ้นอยู่กับพจนานุกรมการใส่ไฮเฟ็นและไม่รับประกันว่าจะมีคำยาว มันสามารถทำให้ข้อความที่เป็นธรรมที่น่ารักแม้ว่า

วิธีแก้ปัญหา Retro-whining

<table>สำหรับเลย์เอาต์ไม่ดี แต่display:tableองค์ประกอบอื่น ๆ ก็ใช้ได้ มันจะเป็นที่เล่นโวหาร (และยืด) เป็นตารางโรงเรียนเก่า:

div.breaking {
   display: table-cell;
}

overflowและwhite-space: pre-wrapคำตอบด้านล่างก็ดีเช่นกัน

การแก้ไขสองประการ:

1. overflow:scroll - สิ่งนี้ทำให้แน่ใจได้ว่าเนื้อหาของคุณสามารถมองเห็นได้ในราคาการออกแบบ (แถบเลื่อนน่าเกลียด)
2. overflow:hidden- เพียงแค่ตัดการล้นใด ๆ มันหมายความว่าคนไม่สามารถอ่านเนื้อหาได้

หาก (ในตัวอย่าง SO) คุณต้องการหยุดซ้อนทับการซ้อนคุณอาจต้องสร้าง div อื่นภายในการแพ็ดเพื่อถือเนื้อหาของคุณ

แก้ไข: ขณะที่คำตอบอื่น ๆ มีวิธีการที่หลากหลายสำหรับการตัดทอนคำนั่นคือการหาความกว้างของการเรนเดอร์ทางฝั่งไคลเอ็นต์ (อย่าพยายามทำฝั่งเซิร์ฟเวอร์นี้ JS และการแทรกตัวแบ่งหรือใช้แท็ก CSS ที่ไม่ได้มาตรฐานและ / หรือ CSS ที่เข้ากันไม่ได้ (ดูword-wrap: break-word ไม่ทำงานใน Firefox )

คุณจะต้องใช้ตัวบอกล้น หาก div ของคุณมีเนื้อหาประเภทบล็อกอื่นที่กว้างเกินไป (รูปภาพ, ตาราง, ฯลฯ ) คุณจะต้องมีส่วนเกินเพื่อไม่ให้ทำลายเลย์เอาต์ / การออกแบบ

ดังนั้นโดยทั้งหมดให้ใช้วิธีอื่น (หรือรวมกัน) แต่อย่าลืมเพิ่มล้นด้วยดังนั้นคุณจึงครอบคลุมเบราว์เซอร์ทั้งหมด

แก้ไข 2 (เพื่อแก้ไขความคิดเห็นของคุณด้านล่าง):

เริ่มต้นด้วยการใช้overflowคุณสมบัติCSS นั้นไม่สมบูรณ์ แต่หยุดการออกแบบ สมัครoverflow:hiddenก่อน โปรดจำไว้ว่าล้นอาจไม่ทำลายในการซ้อนดังนั้นทั้งสองรังdivกันหรือใช้เส้นขอบ (สิ่งใดก็ได้ที่ดีที่สุดสำหรับคุณ)

วิธีนี้จะซ่อนเนื้อหาที่มีเนื้อหามากเกินไปดังนั้นคุณอาจสูญเสียความหมาย คุณสามารถใช้แถบเลื่อน (ใช้overflow:autoหรือoverflow:scrollแทนoverflow:hidden ) แต่ขึ้นอยู่กับขนาดของ div และการออกแบบของคุณสิ่งนี้อาจดูไม่ดีหรือใช้งานได้ดี

เพื่อแก้ไขเราสามารถใช้ JS เพื่อดึงสิ่งต่าง ๆ กลับมาและทำการตัดทอนแบบอัตโนมัติบางรูปแบบ ฉันครึ่งทางผ่านการเขียนโค้ดหลอกให้คุณ แต่มันก็ซับซ้อนอย่างมากเกี่ยวกับครึ่งทาง หากคุณต้องการแสดงให้มากที่สุดให้ใส่เครื่องหมายยัติภังค์ใน ( ดังกล่าวด้านล่าง )

เพิ่งทราบว่านี่เป็นต้นทุนของ CPU ของผู้ใช้ มันอาจส่งผลให้หน้าใช้เวลานานในการโหลดและ / หรือปรับขนาด

นี่เป็นปัญหาที่ซับซ้อนอย่างที่เรารู้และไม่สนับสนุนในลักษณะทั่วไประหว่างเบราว์เซอร์ เบราว์เซอร์ส่วนใหญ่ไม่รองรับคุณสมบัตินี้ แต่อย่างใด

ในงานบางอย่างที่ทำกับอีเมล HTML ที่มีการใช้เนื้อหาผู้ใช้ แต่สคริปต์ไม่สามารถใช้งานได้ (และแม้กระทั่ง CSS ก็ไม่ได้รับการสนับสนุนที่ดี) CSS ต่อไปนี้เล็กน้อยใน wrapper รอบ ๆ บล็อกเนื้อหาที่ไม่ได้เว้นระยะเวลา

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

ในกรณีของเบราว์เซอร์ที่ใช้ Mozilla ไฟล์ XBL ที่กล่าวถึงข้างต้นประกอบด้วย:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

น่าเสียดายที่ Opera 8+ ดูเหมือนจะไม่ชอบโซลูชันใด ๆ ข้างต้นดังนั้น JavaScript จะต้องเป็นโซลูชันสำหรับเบราว์เซอร์เหล่านั้น (เช่น Mozilla / Firefox) โซลูชันข้ามเบราว์เซอร์อื่น (JavaScript) ที่มี Opera รุ่นใหม่กว่า จะใช้สคริปต์ของ Hedger Wang ได้ที่นี่: http://www.hedgerwow.com/360/dhtml/css-word-break.html

ลิงค์ / ความคิดที่มีประโยชน์อื่น ๆ :

Incoherent Babble »คลังบทความของบล็อก»การเลียนแบบ CSS word-wrap สำหรับ Mozilla / Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] ไม่มีการตัดคำใน Opera แสดงผลดีใน IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- ผู้ใช้ / 2004 พฤศจิกายน / 024468.html

CSS การตัดคำข้ามเบราว์เซอร์

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

word-break:break-all;ใช้รูปแบบ ฉันรู้ว่ามันทำงานบนโต๊ะ

คุณหมายความว่าในเบราว์เซอร์ที่สนับสนุนword-wrap: break-wordไม่ทำงานหรือไม่

หากรวมอยู่ในการกำหนดเนื้อหาของสไตล์ชีทมันควรจะใช้ได้ตลอดทั้งเอกสาร

หากโอเวอร์โฟลไม่ใช่โซลูชันที่ดีจาวาสคริปต์ที่กำหนดเองเท่านั้นที่สามารถสลายคำที่ยาวเกินจริงได้

หมายเหตุ: นอกจากนี้ยังมี<wbr>แท็ก Word Breakนี้ สิ่งนี้ทำให้เบราว์เซอร์เป็นจุดที่สามารถแยกบรรทัดได้ น่าเสียดายที่<wbr>แท็กนั้นใช้งานไม่ได้กับเบราว์เซอร์ทั้งหมดเฉพาะ Firefox และ Internet Explorer (และ Opera ที่มีเคล็ดลับ CSS)

เพิ่งตรวจสอบ IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows และ Safari:

word-wrap: break-word;

ใช้งานได้กับลิงก์ขนาดยาวภายใน div ด้วยความกว้างที่กำหนดและไม่มีการประกาศโอเวอร์โฟลว์ใน css:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

ฉันไม่เห็นปัญหาความไม่ลงรอยกันใด ๆ

ฉันเพิ่งค้นพบเกี่ยวกับการใช้ไฮเฟนเนเตอร์จากคำถามนี้ ที่อาจแก้ปัญหาได้

หลังจากการต่อสู้มากมายนี่คือสิ่งที่ได้ผลสำหรับฉัน:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

ใช้งานได้กับ Chrome, Firefox และ Opera เวอร์ชันล่าสุด

โปรดทราบว่าฉันได้ยกเว้นwhite-spaceคุณสมบัติหลายอย่างที่คนอื่นแนะนำ - นั่นเป็นการpreเยื้องสำหรับฉันจริง ๆ

สำหรับฉันใน div ที่ไม่มีขนาดคงที่และมีเนื้อหาแบบไดนามิกที่ใช้งานได้:

display:table;
word-break:break-all;

อีกครั้งที่ regex ในความคิดเห็นนี้มันดี แต่มันเพิ่มเครื่องหมายยัติภังค์ขี้อายเฉพาะระหว่างกลุ่มของ 5 ตัวอักษรที่ไม่ใช่ช่องว่างหรือช่องว่าง ที่ช่วยให้กลุ่มสุดท้ายมีความยาวมากกว่าที่ตั้งใจไว้เนื่องจากไม่มีกลุ่มที่ตรงกันหลังจากนั้น

ตัวอย่างเช่นสิ่งนี้:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... ผลลัพธ์ในสิ่งนี้:

abcde­12345678901234

นี่คือรุ่นที่ใช้ lookahead เชิงบวกเพื่อหลีกเลี่ยงปัญหานั้น:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... ด้วยผลลัพธ์นี้:

abcde­12345­67890­1234

ทางออกที่ฉันมักจะใช้สำหรับปัญหานี้คือการตั้งค่ากฎ CSS ที่แตกต่างกัน 2 รายการสำหรับ IE และเบราว์เซอร์อื่น ๆ :

word-wrap: break-word;

สมบูรณ์แบบใน IE แต่word-wrapไม่ใช่คุณสมบัติ CSS มาตรฐาน เป็นคุณสมบัติเฉพาะของ Microsoft และไม่ทำงานใน Firefox

สำหรับ Firefox สิ่งที่ดีที่สุดในการใช้ CSS เท่านั้นคือการตั้งกฎ

overflow: hidden;

สำหรับองค์ประกอบที่มีข้อความที่คุณต้องการตัด มันไม่ได้ตัดข้อความ แต่ซ่อนส่วนหนึ่งของข้อความที่เกินขีด จำกัด ของภาชนะ มันอาจเป็นทางออกที่ดีหากคุณไม่จำเป็นต้องแสดงข้อความทั้งหมด (เช่นถ้าข้อความอยู่ใน<a>แท็ก)

ปรับปรุง:จัดการสิ่งนี้ใน CSS นั้นเรียบง่ายและยอดเยี่ยม แต่คุณไม่สามารถควบคุมได้ว่าจะเกิดการหยุดพักเมื่อใด ไม่เป็นไรถ้าคุณไม่สนใจหรือข้อมูลของคุณมีตัวอักษรและตัวเลขที่ยาววิ่งโดยไม่มีการหยุดพักตามธรรมชาติ เรามีเส้นทางไฟล์ยาว ๆ URL และหมายเลขโทรศัพท์มากมายซึ่งทั้งหมดนี้มีที่ที่ดีกว่าที่อื่น ๆ

วิธีการแก้ปัญหาของเราคือการใช้การแทนที่ regex เป็นครั้งแรกเพื่อใส่ช่องว่างที่มีความกว้างเป็นศูนย์ (& # 8203;) หลังจากอักขระ 15 ตัวทุกตัวที่ไม่ใช่ช่องว่างหรือหนึ่งในอักขระพิเศษที่เราต้องการพัก จากนั้นเราจะทำการแทนที่อื่นเพื่อใส่ช่องว่างที่มีความกว้างเป็นศูนย์หลังจากอักขระพิเศษเหล่านั้น

ช่องว่างที่มีความกว้างเป็นศูนย์นั้นดีเพราะไม่เคยปรากฏบนหน้าจอเลย ยัติภังค์ขี้อายกำลังสับสนเมื่อพวกเขาแสดงเพราะข้อมูลมียัติภังค์สำคัญ ช่องว่างที่มีความกว้างเป็นศูนย์จะไม่รวมอยู่เมื่อคุณคัดลอกข้อความออกจากเบราว์เซอร์

อักขระหยุดพักพิเศษที่เรากำลังใช้งานอยู่คือเครื่องหมายจุด, เครื่องหมายสแลช, แบ็กสแลช, เครื่องหมายจุลภาค, เครื่องหมายขีดล่าง, @, | และเครื่องหมายขีดคั่น คุณไม่คิดว่าคุณจะต้องทำอะไรเพื่อกระตุ้นให้เกิดการแตกหลังจากยัติภังค์ แต่ Firefox (อย่างน้อย 3.6 และ 4) จะไม่แยกตัวเองที่เครื่องหมายขีดคั่นที่ล้อมรอบด้วยตัวเลข (เช่นหมายเลขโทรศัพท์)

นอกจากนี้เรายังต้องการควบคุมจำนวนตัวละครระหว่างตัวละครปลอมตามพื้นที่ว่างที่มี นั่นหมายความว่าการ regex เพื่อให้ตรงกับการวิ่งไม่หยุดยาวจำเป็นต้องเป็นแบบไดนามิก สิ่งนี้ได้รับการเรียกว่ามากและเราไม่ต้องการสร้าง regexes ที่เหมือนกันเหมือนเดิมซ้ำ ๆ กันเพื่อเหตุผลด้านประสิทธิภาพดังนั้นเราจึงใช้แคช regex ง่าย ๆ โดยใช้นิพจน์ regex และแฟล็กของมัน

นี่คือรหัส; คุณอาจตั้งชื่อฟังก์ชั่นในชุดโปรแกรมอรรถประโยชน์

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

ทดสอบเช่นนี้

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

อัพเดท 2:ปรากฏว่าพื้นที่ศูนย์ความกว้างในความเป็นจริงจะถูกรวมอยู่ในข้อความที่คัดลอกอย่างน้อยบางกรณีคุณก็ไม่สามารถเห็นพวกเขา เห็นได้ชัดว่าการกระตุ้นให้ผู้คนคัดลอกข้อความด้วยตัวอักษรที่ซ่อนอยู่ในนั้นเป็นคำเชิญให้มีข้อมูลเช่นนั้นเข้ามาในโปรแกรมหรือระบบอื่น ๆ แม้แต่ของคุณเองซึ่งมันอาจทำให้เกิดปัญหา ตัวอย่างเช่นหากมันสิ้นสุดลงในฐานข้อมูลการค้นหาอาจล้มเหลวและสตริงการค้นหาเช่นนี้ก็มีแนวโน้มที่จะล้มเหลวเช่นกัน การใช้ปุ่มลูกศรเพื่อย้ายข้อมูลเช่นนี้ต้องใช้ปุ่มกดพิเศษ (ถูกต้อง) เพื่อเลื่อนไปตามอักขระที่คุณมองไม่เห็น แต่ค่อนข้างแปลกสำหรับผู้ใช้หากพวกเขาสังเกตเห็น

ในระบบปิดคุณสามารถกรองอักขระนั้นบนอินพุตเพื่อป้องกันตัวคุณเอง แต่นั่นไม่ได้ช่วยโปรแกรมและระบบอื่น ๆ

ทั้งหมดบอกว่าเทคนิคนี้ใช้งานได้ดี แต่ฉันไม่แน่ใจว่าตัวเลือกที่ดีที่สุดในการทำลายตัวละครจะเป็นอย่างไร

อัปเดต 3:การที่ตัวละครนี้จบลงในข้อมูลนั้นไม่มีความเป็นไปได้ทางทฤษฎีอีกต่อไปมันเป็นปัญหาที่สังเกตได้ ผู้ใช้ส่งข้อมูลที่คัดลอกออกจากหน้าจอจะได้รับการบันทึกในฐานข้อมูลการค้นหาแตกการเรียงลำดับแปลก ๆ ฯลฯ

เราทำสองสิ่ง:

1. เขียนยูทิลิตี้เพื่อลบออกจากคอลัมน์ทั้งหมดของตารางทั้งหมดในแหล่งข้อมูลทั้งหมดสำหรับแอพนี้
2. เพิ่มการกรองเพื่อลบออกไปยังตัวประมวลผลอินพุตสตริงมาตรฐานของเราดังนั้นจึงเป็นไปตามเวลาที่รหัสใด ๆ เห็น

มันใช้งานได้ดีเช่นเดียวกับเทคนิค แต่มันเป็นเรื่องเตือน

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

แก้ไขคือการเพิ่มเครื่องหมายและรายการของตัวละครที่เราไม่ได้ทำลายเช่นนี้

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

จำเป็นต้องตั้งค่า "เลย์เอาต์ตาราง: แก้ไข" เพื่อให้การตัดคำทำงานได้

HYPHENATOR เป็นคำตอบที่ถูก (ให้ไว้ด้านบน) ปัญหาที่แท้จริงที่อยู่เบื้องหลังคำถามของคุณคือเว็บเบราว์เซอร์ยังคงอยู่ (ในปี 2008) ดั้งเดิมอย่างยิ่งที่พวกเขาไม่มีคุณลักษณะการใส่ไฮเฟ็น ดูสิเรายังอยู่ในช่วงเริ่มต้นของการใช้คอมพิวเตอร์ - เราต้องอดทน ตราบใดที่นักออกแบบครองโลกเว็บเราจะมีช่วงเวลาที่ยากลำบากรอคุณสมบัติใหม่ที่เป็นประโยชน์จริง ๆ

อัปเดต: ณ เดือนธันวาคม 2011 ตอนนี้เรามีตัวเลือกอื่นด้วยการสนับสนุนแท็กเหล่านี้ใน FF และ Safari ที่เกิดขึ้นใหม่:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

ฉันได้ทำการทดสอบขั้นพื้นฐานแล้วดูเหมือนว่าจะใช้งานได้กับ Mobile Safari และ Safari 5.1.1 รุ่นล่าสุด

ตารางความเข้ากันได้: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

สำหรับความเข้ากันได้กับการใช้งาน IE 8+:

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

ดูได้ที่นี่http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

สิ่งที่ฉันต้องทำคือใช้สิ่งนี้กับสไตล์ของภาชนะบรรจุ div ที่มีความกว้างชุด

ใช้สิ่งนี้

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

หากคุณมีสิ่งนี้ -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

เพียงสลับไปใช้รูปแบบแนวตั้งที่มี divs และใช้ความกว้างขั้นต่ำใน CSS ของคุณแทนความกว้าง -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

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

ฉันต้องทำสิ่งต่อไปนี้เพราะหากคุณสมบัติไม่ได้ถูกประกาศในลำดับที่ถูกต้องมันจะสุ่มคำที่ผิดและไม่มีการเพิ่มยัติภังค์

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

โพสต์ครั้งแรกโดย Enigmo: https://stackoverflow.com/a/14191114

ใช่ถ้าเป็นไปได้การตั้งค่าความกว้างสัมบูรณ์และการตั้งค่าoverflow : autoทำงานได้ดี

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-wrap: break-word" ทำงานใน Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

เพิ่มลงcssใน div ของคุณ:word-wrap: break-word;

หลังจากที่ทุกคำใช้คำว่า wraps and break ให้เก็บข้อมูลที่เกินไว้และดูว่าวิธีนี้ช่วยแก้ปัญหาของคุณได้หรือไม่ เพียงเปลี่ยนการแสดง div ของคุณเป็น:display: inline;

ฟังก์ชั่นที่เรียบง่าย (ต้องใช้ underscore.js) - จากคำตอบ @porneL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

ฉันได้เขียนฟังก์ชั่นที่ใช้งานได้ดีซึ่งมันแทรก­ตัวอักษร x ลงไปในคำเพื่อให้ได้เส้นที่ดี คำตอบทั้งหมดที่นี่ไม่รองรับเบราว์เซอร์และอุปกรณ์ทั้งหมด แต่ใช้งานได้ดีกับ PHP:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}