ข้อความที่ไหลออกจาก div

เมื่อข้อความไม่มีช่องว่าง และมากกว่าขนาด div 200pxมันจะไหลออกมาความกว้างถูกกำหนดเป็น 200px ฉันใส่รหัสของฉันที่นี่http://jsfiddle.net/madhu131313/UJ6zG/ คุณสามารถดูรูปภาพด้านล่างที่ แก้ไข : ฉันต้องการ ข้อความเพื่อไปยังบรรทัดถัดไป

เกิดจากการที่คุณมีคำยาว ๆ คำเดียวโดยไม่เว้นวรรค คุณสามารถใช้word-wrapคุณสมบัติเพื่อทำให้ข้อความแตก:

#w74 { word-wrap: break-word; }

มีการรองรับเบราว์เซอร์ที่ค่อนข้างดีเช่นกัน ดูเอกสารเกี่ยวกับเรื่องนี้ที่นี่

ใช้

white-space: pre-line;

จะป้องกันไม่ให้ข้อความไหลออกจากไฟล์div. มันจะทำลายข้อความเมื่อถึงจุดสิ้นสุดของไฟล์div.

คุณควรใช้overflow:hidden; หรือscroll

http://jsfiddle.net/UJ6zG/1/

หรือด้วย php คุณสามารถสั้นคำยาว ...

คุณต้องใช้คุณสมบัติ CSS ต่อไปนี้กับ container block (div):

overflow-wrap: break-word;

ตามข้อกำหนด (แหล่งที่มาCSS | MDN ):

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

ด้วยค่าที่กำหนดเป็น break-word

เพื่อป้องกันการล้นคำที่ไม่สามารถแตกได้ตามปกติอาจถูกทำลายโดยพลการหากไม่มีจุดพักที่ยอมรับได้ในบรรทัด

น่ากล่าว ...

คุณสมบัติเดิมเป็นส่วนขยายของ Microsoft ที่ไม่เป็นมาตรฐานและไม่มีคำนำหน้าซึ่งเรียกว่าword-wrapและถูกใช้งานโดยเบราว์เซอร์ส่วนใหญ่ที่มีชื่อเดียวกัน มันได้ถูกเปลี่ยนชื่อoverflow-wrapด้วยword-wrapการเป็นนามแฝง

หากคุณสนใจเกี่ยวกับเบราว์เซอร์เดิมสนับสนุนคุณควรระบุทั้งสองอย่าง:

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

เช่น IE9ไม่รู้จักoverflow-wrapแต่ใช้งานได้ดีกับไฟล์word-wrap

ใช้overflow:autoมันจะให้ scroller กับข้อความของคุณภายในdiv:)

หากสิ่งนี้ช่วยได้ เพิ่มคุณสมบัติต่อไปนี้พร้อมค่าให้กับตัวเลือกของคุณ:

white-space: pre-wrap;

นี้ได้เคล็ดลับสำหรับฉัน:

{word-break: break-all; }

ฉันเพิ่งพบสิ่งนี้ ฉันใช้:display:block;

หากเป็นเพียงอินสแตนซ์เดียวที่ต้องพันทับ 2 หรือ 3 บรรทัดฉันจะใช้เพียงไม่กี่บรรทัด<wbr>ในสตริง จะปฏิบัติต่อสิ่งเหล่านั้นเช่นเดียวกับ<br>แต่จะไม่แทรกตัวแบ่งบรรทัดหากไม่จำเป็น

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

นี่คือซอ

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/