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

ตามความคิดเห็นในหน้า <wbr>นี้เป็น "ซุปแท็กที่คิดค้นโดย Netscape" ที่ไม่ได้มาตรฐาน ดูเหมือนว่ามีปัญหากับการปฏิบัติตามมาตรฐานเช่นเดียวกับ­ ดูเหมือนว่าจะมีวิธีการที่จะได้รับการแก้ปัญหาการทำงานให้กับเบราว์เซอร์ไม่ทั้งหมด

วิธีใดในการจัดการยัติภังค์อ่อนและทำไมคุณถึงเลือก มีวิธีแก้ปัญหาที่ต้องการหรือวิธีปฏิบัติที่ดีที่สุดหรือไม่?

น่าเสียดายที่&shyการสนับสนุนไม่สอดคล้องกันระหว่างเบราว์เซอร์ที่ไม่สามารถใช้งานได้จริง

QuirksMode ถูกต้อง - ไม่มีวิธีที่ดีในการใช้เครื่องหมายขีดกลางแบบอ่อนใน HTML ในขณะนี้ ดูสิ่งที่คุณสามารถทำได้โดยไม่ต้องไป

2013 แก้ไข: ตาม quirksmode , ­ตอนนี้ทำงาน / การสนับสนุนบนเบราว์เซอร์ที่สำคัญทั้งหมด

สรุป ก.พ. 2015 (อัปเดตบางส่วน พ.ย. 2017)

พวกเขาทั้งหมดทำงานได้ค่อนข้างดีโดย­ที่ Google ยังสามารถจัดทำดัชนีคำที่มีอยู่ได้

• ในเบราว์เซอร์: ­และ­ทั้งคู่แสดงผลตามที่คาดไว้ในเบราว์เซอร์หลัก (แม้แต่ IE เก่า!) <wbr>ไม่รองรับ IE เวอร์ชันล่าสุด (10 หรือ 11) และทำงานไม่ถูกต้องใน Edge
• เมื่อคัดลอกและวางจากเบราว์เซอร์: (ทดสอบในปี 2015) ตามที่คาดไว้สำหรับ­และ­สำหรับ Chrome และ Firefox บน Mac บน Windows (10) มันจะเก็บตัวละครและวางเครื่องหมายยัติภังค์ที่แข็งไว้ใน Notepad และยัติภังค์แบบอ่อนที่มองไม่เห็นลงในแอปพลิเคชัน IE (win7) มักจะใส่เครื่องหมายยัติภังค์เสมอแม้ใน IE10 และ Safari (Mac) ก็อปปี้ในลักษณะที่วางเครื่องหมายยัติภังค์ในบางแอปพลิเคชัน (เช่น MS Word) แต่ไม่ใช่อื่น ๆ
• ค้นหาในหน้าผลงาน­และ­บนเบราว์เซอร์ทั้งหมดยกเว้น IE ซึ่งตรงกับการคัดลอกและวางที่แน่นอนการแข่งขัน (แม้ถึง IE11)
• เครื่องมือค้นหา: Google จับคู่คำที่­มีคำที่พิมพ์ตามปกติ ในฐานะที่เป็น 2017 ­ดูเหมือนว่ามันจะไม่ตรงกับคำที่มีอีกต่อไป ยานเดกซ์ Yandex จะเหมือนกัน Bing และ Baidu ดูเหมือนจะไม่ตรงกันเช่นกัน

ทดสอบมัน

สำหรับการทดสอบสดล่าสุดนี่คือตัวอย่างของคำศัพท์เฉพาะที่มีเครื่องหมายยัติภังค์อ่อน

• ­- confumbabbl­ication­ism- Confumbabblicationism
  • .................................................. .................................................. .......... confumbabblicationism
  • .................................................. .................................................. .............. confumbabblicationism

<wbr>donfounbabbl<wbr>ication<wbr>ism- ไซต์นี้ลบออก<wbr/>จากผลลัพธ์ นี่เป็นjsbin.com ข้อมูลโค้ดสำหรับการทดสอบ

• ­- eonfulbabbl­ication­ism- eonfulbabblicationism
  • .................................................. .................................................. ............. eonfulbabblicationism
  • .................................................. .................................................. ................ eonfulbabblicationism

ที่นี่พวกเขาไม่มีเครื่องหมายยัติภังค์ขี้อาย (สำหรับคัดลอกและวางในการทดสอบการค้นหาบนหน้าเขียนในลักษณะที่จะไม่ทำลายการทดสอบเครื่องมือค้นหา):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

แสดงข้ามเบราว์เซอร์

สำเร็จ: แสดงเป็นคำปกติยกเว้นที่ควรจะแตกเมื่อมันแตกและยัติภังค์ในสถานที่ที่ระบุ

ความล้มเหลว: แสดงผิดปกติหรือล้มเหลวในตำแหน่งที่ต้องการ

• Chrome (40.0.2214.115, Mac): ­ความสำเร็จ, <wbr>ความสำเร็จ, ­ความสำเร็จ
• Firefox (35.0.1, Mac): ­ความสำเร็จ, <wbr>ความสำเร็จ, ­ความสำเร็จ
• Safari (6.1.2, Mac): ­สำเร็จ, <wbr> ยังไม่ได้ทดสอบ , ­สำเร็จ
• Edge (Windows 10): ­สำเร็จ, <wbr> ล้มเหลว (แตก แต่ไม่มีเครื่องหมายขีดคั่น), ­สำเร็จ
• IE11 (Windows 10): ­สำเร็จ, <wbr> ล้มเหลว (ไม่หยุดพัก), ­สำเร็จ
• IE10 (Windows 10): ­ความสำเร็จ, <wbr> ล้มเหลว (ไม่หยุดพัก), ­ความสำเร็จ
• IE8 (Windows 7): เอาแน่เอานอน - บางครั้งไม่มีของพวกเขาทำงานที่ทั้งหมดและพวกเขาทั้งหมดเพียงทำตาม word-wrapCSS บางครั้งพวกเขาดูเหมือนจะทำงานทั้งหมด ยังไม่พบรูปแบบที่ชัดเจนว่าทำไม
• IE7 (Windows 7): ­ความ<wbr>สำเร็จ­ความสำเร็จความสำเร็จ

คัดลอกวางในเบราว์เซอร์

ความสำเร็จ: การคัดลอกและวางทั้งคำโดยไม่มีการใส่ยัติภังค์ (ทดสอบบน Mac ที่วางลงในการค้นหาเบราว์เซอร์, MS Word 2011, และ Sublime Text)

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

• Chrome (40.0.2214.115, Mac): ­ความสำเร็จ, <wbr>ความสำเร็จ, ­ความสำเร็จ
• Firefox (35.0.1, Mac): ­ความสำเร็จ, <wbr>ความสำเร็จ, ­ความสำเร็จ
• Safari (6.1.2, Mac): ­ ล้มเหลวใน MS Word (วางทั้งหมดเป็นยัติภังค์), ความสำเร็จในการใช้งานอื่น ๆ<wbr> ล้มเหลว , ­ ล้มเหลวใน MS Word (วางทั้งหมดเป็นยัติภังค์), ประสบความสำเร็จในการใช้งานอื่น ๆ
• IE10 (Win7): ­ ไม่ได้วางทั้งหมดเป็นยัติภังค์, <wbr> ล้มเหลว , ­ ไม่วางทั้งหมดเป็นยัติภังค์
• IE8 (Win7): วาง­ ไม่สำเร็จทั้งหมดเป็นยัติภังค์, <wbr> ล้มเหลว , ­ ไม่วางทั้งหมดเป็นยัติภังค์
• IE7 (Win7): วาง­ ไม่สำเร็จทั้งหมดเป็นยัติภังค์, <wbr> ล้มเหลว , ­ ไม่วางทั้งหมดเป็นยัติภังค์

การจับคู่เครื่องมือค้นหา

อัปเดตเมื่อพฤศจิกายน 2560 <wbr>ไม่ได้ทดสอบเพราะ CMS ของ StackOverflow แยกออก

สำเร็จ: ค้นหาทั้งคำที่ไม่ใส่ยัติภังค์ค้นหาหน้านี้

ความล้มเหลว: เครื่องมือค้นหาค้นหาหน้านี้เฉพาะในการค้นหาส่วนที่ขาดของคำหรือคำที่มีเครื่องหมายขีดคั่น

• Google: ­ล้มเหลว­สำเร็จ
• Bing: ­ล้ม­เหลวล้มเหลว
• ไป่ตู้: ­ล้มเหลว, ­ล้มเหลว (สามารถจับคู่แฟรกเมนต์ภายในสตริงที่ยาวกว่า แต่ไม่ใช่คำที่ประกอบด้วย a ­หรือของตนเอง­)
• ยานเดกซ์: ­ล้มเหลว­สำเร็จ (แม้ว่าเป็นไปได้ว่ามันตรงกับส่วนของสตริงเช่น Baidu ไม่แน่ใจ 100%)

ค้นหาในหน้าต่างๆในเบราว์เซอร์

สำเร็จและล้มเหลวเนื่องจากการจับคู่เครื่องมือค้นหา

• Chrome (40.0.2214.115, Mac): ­ความสำเร็จ, <wbr>ความสำเร็จ, ­ความสำเร็จ
• Firefox (35.0.1, Mac): ­ความสำเร็จ, <wbr>ความสำเร็จ, ­ความสำเร็จ
• Safari (6.1.2, Mac): ­ความสำเร็จ, <wbr>ความสำเร็จ, ­ความสำเร็จ
• IE10 (Win7): ­ ไม่ตรงเท่านั้นเมื่อทั้งสองมีเครื่องหมายยัติภังค์ขี้อาย, <wbr>สำเร็จ, ­ ล้มเหลวตรงเท่านั้นเมื่อทั้งสองประกอบด้วยยัติภังค์ขี้อาย
• IE8 (Win7): การแข่งขัน­ ล้มเหลวเฉพาะเมื่อทั้งคู่มีเครื่องหมายยัติภังค์ที่ขี้อาย, <wbr>สำเร็จ, การแข่งขันที่­ ล้มเหลวก็ต่อเมื่อทั้งคู่มียัติภังค์ขี้อาย
• IE7 (Win7): ­ ไม่ตรงเท่านั้นเมื่อทั้งสองประกอบด้วยยัติภังค์ขี้อาย, <wbr>สำเร็จ, ­ ไม่ตรงเท่านั้นเมื่อทั้งสองประกอบด้วยยัติภังค์ขี้อาย

มีความพยายามอย่างต่อเนื่องเพื่อเป็นมาตรฐานใน CSS3

เบราว์เซอร์ที่ทันสมัยบางแห่งโดยเฉพาะอย่างยิ่ง Safari และ Firefox รองรับอยู่แล้ว นี่คือสิ่งที่ดีและถึงวันที่อ้างอิงในการสนับสนุนเบราว์เซอร์

เมื่อยัติภังค์ CSS ได้รับการใช้งานในระดับสากลนั่นจะเป็นทางออกที่ดีที่สุด ในระหว่างนี้ฉันสามารถแนะนำHyphenatorซึ่งเป็นสคริปต์ JS ที่ระบุวิธีการใส่ยัติภังค์ข้อความของคุณในวิธีที่เหมาะสมที่สุดสำหรับเบราว์เซอร์ที่ต้องการ

Hyphenator:

• อาศัยอัลกอริทึมยัติภังค์ Franklin M. Liangsที่รู้จักกันทั่วไปจาก LaTeX และ OpenOffice
• ใช้การใส่ไฮเฟ็น CSS3 ในตำแหน่งที่พร้อมใช้งาน
• แทรกโดยอัตโนมัติ­ในเบราว์เซอร์อื่น ๆ ส่วนใหญ่
• รองรับหลายภาษา
• สามารถกำหนดค่าได้สูง
• กลับมาอย่างสง่างามในกรณีที่ไม่ได้เปิดใช้งานจาวาสคริปต์

ฉันเคยใช้และใช้งานได้ดี!

ฉันใช้­แทรกเองเมื่อจำเป็น

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

การสร้างพยางค์นั้นไม่ใช่เรื่องง่ายและฉันไม่สามารถแนะนำให้ทิ้งไว้ใน Javascriptได้ มันเป็นหัวข้อเฉพาะทางภาษาและอาจจำเป็นต้องได้รับการแก้ไขอย่างละเอียดจากผู้ให้บริการหากคุณไม่ต้องการให้ข้อความของคุณเปลี่ยนไป บางภาษาเช่นเยอรมันสร้างคำประสมและมีแนวโน้มที่จะนำไปสู่ปัญหาการสลายตัว เช่นSpargelder( เชื้อโรคเงินที่บันทึกไว้, PL.) อาจถูกห่อด้วยสองพยางค์ ( Spar-gel-der) อย่างไรก็ตามห่อไว้ในตำแหน่งที่สองจะเปิดส่วนแรกที่จะแสดงเป็นSpargel-( จมูก.หน่อไม้ฝรั่ง) เปิดใช้งานเป็นแนวคิดที่สมบูรณ์ทำให้เข้าใจผิดในหัวของผู้อ่านจึง shoud จะหลีกเลี่ยง

แล้วสตริงWachstubeล่ะ? อาจหมายถึง 'guardroom' ( Wach-stu-be) หรือ 'tube of wax' ( Wachs-tu-be) คุณอาจพบตัวอย่างอื่นเป็นภาษาอื่นเช่นกัน คุณควรตั้งเป้าหมายที่จะจัดเตรียมสภาพแวดล้อมที่โต๊ะทำงานสามารถรองรับได้ในการสร้างข้อความที่มีพยางค์ที่ดีอ่านหลักฐานทุกคำที่สำคัญ

มันสำคัญมากที่จะสังเกตว่าในฐานะของ HTML5 <wbr>และ­ ไม่ควรทำสิ่งเดียวกัน !

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

­เป็นยัติภังค์ที่อ่อนนุ่มคือ U + 00AD: SOFT HYPHEN ตัวอย่างเช่น,

innehålls­förteckning

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

innehållsförteckning

หรือเป็น

innehålls-
förteckning

ณ วันนี้ยัติภังค์แบบนุ่มสามารถใช้งานได้ใน Firefox, Chrome และ Internet Explorer

wbrองค์ประกอบ

wbrองค์ประกอบเป็นโอกาสที่คำแบ่งซึ่งจะไม่แสดงยัติภังค์ถ้าแบ่งบรรทัดเกิดขึ้น ตัวอย่างเช่น,

ABCDEFG<wbr/>abcdefg

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

ABCDEFGabcdefg

หรือเป็น

ABCDEFG
abcdefg

ณ วันนี้องค์ประกอบนี้ใช้ได้ใน Firefox และ Chrome

ศูนย์ความกว้างของพื้นที่นิติบุคคลสามารถนำมาใช้ในสถานที่ของ<wbr>แท็กได้อย่างน่าเชื่อถือในแทบทุกแพลตฟอร์ม

​

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

⁠

ด้วยสองสิ่งนี้คุณสามารถทำอะไรก็ได้

นี่เป็นโซลูชัน crossbrowser ที่ฉันดูเมื่อไม่นานมานี้ที่ทำงานกับลูกค้าและใช้ jQuery:

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery); 

ฉันแนะนำให้ใช้wbrดังนั้นรหัสสามารถเขียนดังนี้:

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

มันจะไม่นำช่องว่างระหว่าง charaters ในขณะที่­จะไม่หยุดช่องว่างที่สร้างขึ้นโดยการแบ่งบรรทัด

ฉันใช้อักขระเครื่องหมายขีดคั่นที่มีเครื่องหมายยัติภังค์อ่อนในเดสก์ท็อปและเบราว์เซอร์มือถือน้อยเพื่อแก้ปัญหา

สัญลักษณ์ Unicode เป็น\u00ADและสวยง่ายที่จะแทรกเข้าไปในสายอักขระ Unicode s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'งูใหญ่เช่น

วิธีแก้ปัญหาอื่น ๆ ก็คือการแทรก unicode char ตัวเองและสตริงซอร์สจะดูธรรมดาอย่างสมบูรณ์ในตัวแก้ไขเช่น Sublime Text, Kate, Geany, ฯลฯ (เคอร์เซอร์จะรู้สึกถึงสัญลักษณ์ที่มองไม่เห็น)

เครื่องมือแก้ไขภายในสิบหกสามารถทำงานนี้ได้อย่างง่ายดาย

kludge ง่ายคือการใช้ตัวอักษรที่หายากและสามารถมองเห็นได้เช่นซึ่งเป็นเรื่องง่ายที่จะคัดลอกและวางและแทนที่มันในยัติภังค์อ่อนใช้เช่นหน้าสคริปต์ใน¦ $(document).ready(...)รหัสที่มาเหมือนจะง่ายต่อการอ่านกว่าs = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'

บางครั้งเว็บเบราว์เซอร์ดูเหมือนว่าจะให้อภัยมากขึ้นถ้าคุณใช้ Unicode string ­แทน­เอนทิตี

หากคุณมีโชคไม่ดีและยังต้องใช้ JSF 1 ดังนั้นทางออกเดียวคือใช้ & # 173 ;, & shy; ไม่ทำงาน, ไม่เป็นผล.

<wbr> และ & shy;

วันนี้คุณสามารถใช้ทั้ง

<wbr>ใช้เพื่อแยกและไม่ใส่ข้อมูลเพิ่มเติม

ตัวอย่างใช้เพื่อแสดงลิงก์:

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

&อาย; เมื่อจำเป็น ณ จุดนี้ข้อความจะแตกและเพิ่มยัติภังค์

ตัวอย่าง:

"É im & shy; pos & shy; sí & shy; vel pa & shy; ra um ho & shy; mem a & shy; pren & shy; der a & shy; qui & shy; lo que ele acha que já sa & shy; be."

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}

<div>https://<wbr>stackoverflow.com<wbr>/questions/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>