ฉันกำลังสงสัยว่าอะไรคือความแตกต่างระหว่างทั้งสอง เมื่อฉันใช้ทั้งพวกเขาดูเหมือนจะทำลายคำว่ามันไม่เหมาะสมภาชนะ แต่ทำไม W3C จึงทำได้สองวิธี

สเปค W3 ที่พูดถึงสิ่งเหล่านี้ดูเหมือนจะแนะนำว่าword-break: break-allสำหรับการต้องการพฤติกรรมที่เฉพาะเจาะจงกับข้อความ CJK (จีน, ญี่ปุ่นและเกาหลี) ในขณะที่word-wrap: break-wordพฤติกรรมทั่วไปที่ไม่ได้รับรู้มาก CJK

word-wrap: break-word เพิ่งเปลี่ยนเป็น overflow-wrap: break-word

• จะตัดคำยาว ๆ เข้าบรรทัดถัดไป
• ปรับคำที่แตกต่างกันเพื่อไม่ให้อยู่ตรงกลาง

word-break: break-all

• ไม่ว่าจะเป็นคำแบบต่อเนื่องหรือหลาย ๆ คำแยกคำเหล่านั้นที่ขอบของขีด จำกัด ความกว้าง (เช่นแม้แต่ในตัวอักษรของคำเดียวกัน)

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

และถ้ามันไม่สำคัญไปด้วย

ด้วยword-breakคำที่ยาวมากเริ่มต้นที่จุดที่ควรเริ่มและมันจะถูกทำลายได้นานเท่าที่จำเป็น

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

อย่างไรก็ตามด้วยword-wrapคำที่ยาวมากจะไม่เริ่มที่จุดที่ควรเริ่ม มันตัดบรรทัดถัดไปและจากนั้นถูกทำลายตามต้องการ

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

word-wrapถูกเปลี่ยนชื่อเป็นoverflow-wrapอาจหลีกเลี่ยงความสับสนนี้

นี่คือสิ่งที่เรามี:

ล้นห่อ

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

ค่าที่เป็นไปได้:

• ปกติ : บ่งชี้ว่าบรรทัดอาจแตกที่จุดพักคำปกติเท่านั้น

• break-word : ระบุว่าคำที่ไม่สามารถแตกได้ปกติจะแตกที่จุดใดก็ได้หากไม่มีจุดพักในบรรทัดที่ยอมรับได้

แหล่ง

คำแบ่ง

คำแบ่งทรัพย์สิน CSS จะใช้ในการระบุว่าจะทำลายสายภายในคำ

• ปกติ : ใช้กฎการแบ่งบรรทัดเริ่มต้น
• ทำลายทั้งหมด : ตัวแบ่งคำอาจถูกแทรกระหว่างตัวละครใด ๆ สำหรับข้อความที่ไม่ใช่ CJK (จีน / ญี่ปุ่น / เกาหลี)
• Keep-all : ไม่อนุญาตให้แบ่งคำสำหรับข้อความ CJK ลักษณะการทำงานของข้อความที่ไม่ใช่ CJK เหมือนกับปกติ

แหล่ง

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

ดังนั้น:

• overflow-wrap: break-word: ในสถานการณ์ที่มีมากเกินไปให้แบ่งคำ
• word-break: break-all: ในสถานการณ์ปกติเพียงแค่แบ่งคำที่ท้ายบรรทัด ไม่จำเป็นต้องโอเวอร์โฟลว์

อย่างน้อยใน Firefox (ตั้งแต่ v24) และ Chrome (ตั้งแต่ v30) เมื่อใช้กับเนื้อหาในtableองค์ประกอบ:

word-wrap:break-word

จะไม่ทำให้คำยาวห่อซึ่งอาจส่งผลให้ในตารางเกินขอบเขตของภาชนะ;

word-break:break-all

จะส่งผลให้การห่อคำและตารางที่เหมาะสมภายในภาชนะของมัน

สาธิต jsfiddle

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

ตัดคำ

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

คำ BREAK

คุณสมบัตินี้ควบคุมพฤติกรรมการแบ่งบรรทัดภายในคำ มันมีประโยชน์อย่างยิ่งในกรณีที่ใช้หลายภาษาในองค์ประกอบ

มีความแตกต่างอย่างมาก break-allโดยทั่วไปใช้ไม่ได้สำหรับการแสดงข้อความที่อ่านได้

สมมติว่าคุณมีสตริงThis is a text from an old magazineในคอนเทนเนอร์ที่พอดีกับ 6 ตัวอักษรต่อแถวเท่านั้น

word-break: break-all

This i
s a te
xt fro
m an o
ld mag
azine

ในขณะที่คุณสามารถเห็นผลเป็นที่น่ากลัว break-allจะพยายามใส่อักขระให้มากที่สุดในแต่ละแถวเท่าที่จะทำได้มันจะแยกคำ 2 ตัวอักษรเช่น "is" ไปยัง 2 แถว! มันไร้สาระ นี่คือเหตุผลที่ break-allไม่ค่อยมีใครใช้

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordจะทำลายคำที่ยาวเกินไปที่จะพอดีกับคอนเทนเนอร์ (เช่น "นิตยสาร" ซึ่งมี 8 ตัวอักษรและจะเหมาะกับ 6 ตัวอักษรเท่านั้น) มันจะไม่ทำลายคำที่เหมาะสมกับภาชนะทั้งหมดของพวกเขาแทนมันจะผลักพวกเขาไปยังบรรทัดใหม่

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

word-break:break-all :

คำต่อไปยังชายแดนแล้วแบ่งในการขึ้นบรรทัดใหม่

word-wrap:break-word :

ในตอนแรกการตัดคำในบรรทัดใหม่แล้วดำเนินการต่อที่ชายแดน

ตัวอย่าง:

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

จากข้อกำหนด W3 ที่เกี่ยวข้องซึ่งไม่ชัดเจนเนื่องจากไม่มีบริบท - หนึ่งสามารถอนุมานต่อไปนี้:

• word-break: break-all ใช้สำหรับแยกคำต่างประเทศที่ไม่ใช่ CJK (พูดตะวันตก) ในการเขียนตัวอักษร CJK (จีนญี่ปุ่นหรือเกาหลี)
• word-wrap: break-word สำหรับการแบ่งคำในภาษาที่ไม่ผสมกัน (ให้เราพูดเพียงภาษาตะวันตกเท่านั้น)

อย่างน้อยนี่เป็นความตั้งใจของ W3 สิ่งที่เกิดขึ้นจริงก็คือความขัดแย้งที่เกิดขึ้นกับเบราว์เซอร์ นี่คือเขียนขึ้นที่ดีของปัญหาต่างๆที่เกี่ยวข้อง

ข้อมูลโค้ดต่อไปนี้อาจทำหน้าที่เป็นบทสรุปของวิธีการใช้คำในการห่อคำด้วย CSS ในสภาพแวดล้อมของเบราว์เซอร์ข้าม:

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

นอกจากนี้การแสดงความคิดเห็นสนับสนุนเบราว์เซอร์ก่อนหน้านี้สำหรับดูเหมือนว่าจะดีขึ้นเล็กน้อยกว่าword-wrapword-break