วิธีแก้ปัญหาตัวอักษรภาษาอังกฤษของ Firefox โดยไม่ต้องห่อเส้น

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

ในร่าง CSS3 มีการเพิ่มคุณสมบัติใหม่สอง Word-wrap และการทำลายคำลงในการประมวลผลข้อความเพื่อแก้ปัญหานี้:

1. {Word-wrap: break-word;}: ตามกฎข้อความสำหรับภาษาเอเชียและไม่ใช่เอเชียการห่อเส้นบรรทัดจะได้รับอนุญาตภายในตัวละครและอักขระใด ๆ ในสายข้อความภาษาที่ไม่ใช่เอเชียจะถูกทำลายภายในอักขระโดยพลการ
2. {Word-break: break-all;}: เนื้อหาจะถูกทำลายภายในขอบเขตหากจำเป็นคำศัพท์จะเกิดขึ้นเช่นกัน

ต่อไปนี้เป็นสถานการณ์สนับสนุนของเบราว์เซอร์ทั่วไป:

• [1] ในความเข้ากันได้ของ CSS ของ MSDN และ Internet Explorer จะเห็นได้ว่า IE8 จะรองรับทั้ง Word-wrap และ Word-Break เช่น IE6 และ IE7 แต่ฉันไม่สนับสนุนสองรายการนี้หลังจากทดสอบ IE8BETA2 เนื่องจาก IE8 ยังอยู่ในช่วงเบต้าและฉันเชื่อว่า IE8 จะสนับสนุนในที่สุดจึงเป็นวิธีที่ดีในการประกาศ <meta content="IE=7" http-equiv="X-UA-Compatible" /> ที่ส่วนหัวเพื่อให้ IE8 ตีความหน้าเว็บตาม IE7
• [2] Firefox 3.1 จะสนับสนุนแอตทริบิวต์ Word-wrap

ตั้งแต่ {break word-break: break-all;} ทำให้เกิดการอ่านอย่างรุนแรงของภาษาอังกฤษและตัวเลขและล้มเหลวในการห่อสัญลักษณ์ติดต่อกัน {word-wrap: break-word;} เป็นตัวเลือกที่ค่อนข้างดี

อย่างไรก็ตามเมื่อเผชิญกับการสนับสนุนที่ไม่ดีจากเบราว์เซอร์เราไม่สามารถแก้ปัญหานี้ได้โดยไม่ต้องใช้ JavaScript นั่นคือเมื่อเบราว์เซอร์ไม่รองรับโซลูชัน CSS ให้ใส่อักขระ "8203" ในตำแหน่งที่เหมาะสมของสตริงต่อเนื่อง (แน่นอนว่าคุณสามารถใช้ <wbr /> และ "ขี้อาย;

 function fnBreakWordAll(o){
 var o = o || -
 iWord = O.Word || 13,
 IRE = O.Re || '[a-za-z0-9]',
 Ball = O.All || เท็จ,
 sclassName = o.className || 'Word-Break-all',
 AELS = O.ELS || (การทำงาน(){
 var aels = []
 aallels = document.getElementsByTagname ('*')
 re = ใหม่ regexp ('(?:^| // s +)' + sclassname + '(?: // s + | $)');
 สำหรับ (var i = 0, ilen = aallels.length; i <ilen; ++ i) {
 if (re.test (aallels [i] .classname)) {
 aels [aels.length] = aallels [i];
 -
 -
 คืน AELS;
 - -
 fnbreakword = function (oel) {
 // แก้ไขตาม http://www.hedgerwow.com/360/dhtml/css-word-break.html
 if (! oel || oel.nodeType! == 1) {
 กลับเท็จ;
 } อื่นถ้า (oel.currentstyle && typeof oel.currentstyle.wordwrap === 'สตริง') {
 breakword = function (oel) {
 oel.runtimestyle.wordWrap = 'break-word';
 กลับมาจริง;
 -
 ส่งคืน breakword (oel);
 } อื่นถ้า (document.createTreeWalker) {
 var trim = function (str) {
 str = str.replace (/^/s/s*/, '');
 var ws = // s/,
 i = str.length;
 ในขณะที่ (ws.test (str.charat (-i)));
 return str.slice (0, i + 1);
 -
 breakword = function (oel) {
 var dwalker = document.createTreeWalker (oel, nodefilter.show_text, null, false);
 var node, s, c = string.fromCharcode ('8203')
 // re =/([a-za-z0-9] {0,13})/;
 re = ใหม่ regexp ('(' + ire + '{0,' + iword + '})');
 ในขณะที่ (dwalker.nextNode ()) {
 node = dwalker.currentNode;
 s = trim (node.nodevalue) .split (re) .join (c);
 node.nodevalue = s;
 -
 กลับมาจริง;
 -
 ส่งคืน breakword (oel);
 -
 -
 สำหรับ (var i = 0, n = aels.length; i <n; ++ i) {
 var sua = navigator.useragent,
 stn = aels [i] .tagname.toLowercase ();
 if ((/opera/). ทดสอบ (sua) || (/firefox/).test(sua) || ((/khtml/).test(sua) &&
 (stn ​​=== 'td' || stn === 'th')) || ลูกบอล){
 fnbrekword (aels [i]);
 -
 -
 -

สำหรับแอปพลิเคชันเฉพาะโปรดดูตัวอย่างการสาธิต

ฟังก์ชั่น FNWORDBREATALL ให้พารามิเตอร์ที่กำหนดเองและวิธีการใช้งานและพารามิเตอร์มีดังนี้:

 fnWordBreakAll({word:15,re:'[//w]',all:true});

ส่วนหลักของฟังก์ชั่นนี้ได้รับการแก้ไขจาก Hedger Wang รวบรวมโซลูชัน JavaScript "Cross Browser Word Breaker" มันใช้ document.createTreeWalker และวิธีการแยกเพื่อเพิ่ม "#8203" ให้กับตัวละครแต่ละตัวในเบราว์เซอร์ที่ไม่ใช่ โดยพื้นฐานแล้วไม่มีปัญหาเมื่อใช้ในข้อความภาษาจีนบริสุทธิ์ แต่ถ้าคุณสังเกตตัวอย่างที่เขาให้คุณจะพบว่าเมื่อมีภาษาอังกฤษหรือตัวเลขในข้อความแม้ว่ามันจะแก้ปัญหาการแบ่งบรรทัดมันทำให้ข้อความอ่านยากและเพิ่มระยะห่างระหว่างตัวละครดังนั้นฉันจึงทำการปรับปรุงข้างต้น