วิธีการบังคับให้แบ่งบรรทัดในคำยาวใน DIV?

โอเคนี่ทำให้ฉันสับสนจริงๆ ฉันมีเนื้อหาภายใน div เช่นนี้:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

อย่างไรก็ตามเนื้อหาล้น DIV (ตามที่คาดไว้) เนื่องจาก 'คำว่า' ยาวเกินไป

ฉันจะบังคับให้เบราว์เซอร์ 'หยุด' คำที่จำเป็นเพื่อให้พอดีกับเนื้อหาทั้งหมดภายในได้อย่างไร

ใช้ word-wrap:break-word;

มันยังใช้งานได้ใน IE6 ซึ่งน่าประหลาดใจ

word-wrap: break-wordถูกแทนที่ด้วยoverflow-wrap: break-word;ซึ่งทำงานได้ในทุกเบราว์เซอร์ที่ทันสมัย IE ซึ่งเป็นเบราว์เซอร์ที่ตายแล้วจะพึ่งพาการไม่ยอมรับและไม่ได้มาตรฐานword-wrapตลอดไป

การใช้งานที่มีอยู่ในword-wrapปัจจุบันยังคงสามารถใช้งานได้เนื่องจากเป็นชื่อแทนสำหรับoverflow-wrapข้อมูลจำเพาะ

ฉันไม่แน่ใจเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์

word-break: break-all;

นอกจากนี้คุณสามารถใช้<wbr>แท็ก

<wbr>(ตัวแบ่งคำ) หมายถึง: "เบราว์เซอร์อาจแทรกตัวแบ่งบรรทัดที่นี่หากต้องการ" เบราว์เซอร์ไม่คิดว่าการแบ่งบรรทัดจะไม่มีอะไรเกิดขึ้น

นี่สามารถเพิ่มลงในคำตอบที่ยอมรับได้สำหรับโซลูชัน 'ข้ามเบราว์เซอร์'

แหล่งที่มา:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

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

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

ฉันเป็นเพียง Googling ปัญหาเดียวกันและโพสต์ทางออกสุดท้ายของฉันที่นี่ มันเกี่ยวข้องกับคำถามนี้ด้วย

คุณสามารถทำสิ่งนี้ได้อย่างง่ายดายด้วย div โดยกำหนดสไตล์word-wrap: break-word(และคุณอาจต้องกำหนดความกว้างของมันด้วย)

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

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

รหัสตัวอย่าง:

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

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​เป็นเอนทิตี HTML สำหรับอักขระ unicode ที่เรียกว่า space-width space (ZWSP) ซึ่งเป็นตัวอักษรที่มองไม่เห็นซึ่งระบุโอกาสในการแบ่งบรรทัด ในทำนองเดียวกันจุดประสงค์ของยัติภังค์คือการระบุโอกาสในการแบ่งบรรทัดภายในขอบเขตของคำ

พบว่าการใช้ดังต่อไปนี้ทำงานผ่านเบราว์เซอร์ที่สำคัญมากที่สุด (Chrome, IE, Safari iOS / OSX) ยกเว้น Firefox (v50.0.2) เมื่อใช้ flexbox width: autoและอาศัย

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

หมายเหตุ: คุณอาจต้องเพิ่มคำนำหน้าผู้ขายเบราว์เซอร์หากคุณไม่ได้ใช้โปรแกรมแก้ไขอัตโนมัติ

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

CSS word-wrap:break-word; , การทดสอบใน Firefox 3.6.3

ฉันแก้ไขปัญหาด้วยรหัสด้านล่าง

display: table-caption;

ลบ white-space: nowrapหากมี

Implement:

white-space: inherit;
word-break: break-word;

เบราว์เซอร์ Whitespace ถูกสงวนไว้ ข้อความจะถูกห่อเมื่อจำเป็นและในบรรทัดใหม่

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

การสาธิต

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

จากMDN :

overflow-wrapระบุคุณสมบัติ CSS หรือไม่ว่าเบราว์เซอร์ควรแทรกตัวแบ่งบรรทัดภายในคำที่จะป้องกันไม่ให้ข้อความจากล้นกล่องเนื้อหา

ในทางตรงกันข้ามกับword-break, overflow-wrapเพียงจะสร้างหยุดพักถ้าคำทั้งหมดไม่สามารถวางบนเส้นของตัวเองโดยไม่ต้องล้น

ดังนั้นคุณสามารถใช้:

overflow-wrap: break-word;

ฉันสามารถใช้ ?

ก่อนอื่นคุณควรระบุความกว้างขององค์ประกอบของคุณ เช่น:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

ดังนั้นเมื่อข้อความมาถึงความกว้างองค์ประกอบข้อความจะถูกแยกย่อยเป็นบรรทัด

ดังที่ได้กล่าวไว้ในการตอบกลับของ @ davidcondrey ไม่ใช่แค่ ZWSP เท่านั้น แต่ยังรวมถึง SHY ­ ­ที่สามารถใช้ในคำที่สร้างขึ้นมานาน (คิดว่าเยอรมันหรือดัตช์) ที่ต้องแตกสลายในจุดที่คุณต้องการ มองไม่เห็น แต่จะให้ยัติภังค์ในช่วงเวลาที่ต้องการดังนั้นจึงรักษาทั้งคำที่เชื่อมต่อและบรรทัดไว้จนเต็ม

ด้วยวิธีนี้คำว่าluchthavenpolitieagentอาจถูกบันทึกไว้lucht­haven­politie­agentซึ่งให้ส่วนที่ยาวกว่าพยางค์ของคำ
แต่ผมไม่เคยอ่านอะไรอย่างเป็นทางการเกี่ยวกับมันยัติภังค์อ่อนเหล่านี้จัดการเพื่อให้ได้ความสำคัญสูงในเบราว์เซอร์กว่ายัติภังค์อย่างเป็นทางการในคำเดียวสร้าง ( ถ้าพวกเขามีบางส่วนขยายสำหรับมันเลย)
ในทางปฏิบัติเบราว์เซอร์ไม่สามารถทำลายคำที่ยาวและสร้างขึ้นเองได้ บนหน้าจอขนาดเล็กส่งผลให้เกิดบรรทัดใหม่สำหรับมันหรือในบางกรณีแม้แต่บรรทัดคำเดียว (เช่นเมื่อสองคำที่สร้างขึ้นติดตาม)

FYI: เป็นภาษาดัตช์สำหรับเจ้าหน้าที่สนามบิน

word-break: ปกติดูเหมือนว่าจะใช้งานได้ดีกว่า word-break: break-word เนื่องจากตัวแบ่งคำเริ่มต้นเช่น EN

word-break: normal

ทำเช่นนี้:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

ลองใช้ตามสไตล์ของเรา

white-space: normal;