Làm thế nào để bạn giải quyết vấn đề với dấu gạch nối mềm trên các trang web của bạn? Trong một văn bản có thể có những từ dài mà bạn có thể muốn ngắt dòng bằng dấu gạch nối. Nhưng bạn không muốn dấu gạch nối hiển thị nếu toàn bộ từ nằm trên cùng một dòng.

Theo nhận xét trên trang này <wbr> là một "súp súp" không chuẩn được phát minh bởi Netscape ". Có vẻ như ­ có vấn đề với việc tuân thủ tiêu chuẩn là tốt . Dường như không có cách nào để có được một giải pháp làm việc cho tất cả các trình duyệt .

Đó là cách của bạn để xử lý các dấu gạch nối mềm và tại sao bạn chọn nó? Có một giải pháp ưa thích hoặc thực hành tốt nhất?

Thật không may, &shysự hỗ trợ của nó không nhất quán giữa các trình duyệt đến mức nó không thể thực sự được sử dụng.

QuirksMode đã đúng - không có cách nào tốt để sử dụng dấu gạch nối mềm trong HTML ngay bây giờ. Xem những gì bạn có thể làm để đi mà không có họ.

Chỉnh sửa 2013: Theo QuirksMode , ­hiện hoạt động / được hỗ trợ trên tất cả các trình duyệt chính.

Tóm tắt tháng 2 năm 2015 (cập nhật một phần tháng 11 năm 2017)

Tất cả đều hoạt động khá tốt, ­cạnh đó vì Google vẫn có thể lập chỉ mục các từ có chứa nó.

• Trong các trình duyệt: ­ và ­cả hai đều hiển thị như mong đợi trong các trình duyệt chính (ngay cả IE cũ!). <wbr>không được hỗ trợ trong các phiên bản IE gần đây (10 hoặc 11) và không hoạt động chính xác trong Edge.
• Khi được sao chép và dán từ các trình duyệt: (đã được thử nghiệm 2015) như mong đợi ­và ­cho Chrome và Firefox trên Mac, trên Windows (10), nó giữ các ký tự và dán các dấu gạch nối cứng vào Notepad và các dấu gạch nối mềm vô hình vào các ứng dụng hỗ trợ chúng. IE (win7) luôn dán các dấu gạch ngang, ngay cả trong các bản sao IE10 và Safari (Mac) theo cách dán như dấu gạch nối trong một số ứng dụng (ví dụ: MS Word), nhưng không phải các dấu gạch nối khác
• Tìm trên trang hoạt động cho ­và ­trên tất cả các trình duyệt ngoại trừ IE chỉ khớp với các kết quả được sao chép và dán chính xác (thậm chí lên đến IE11)
• Công cụ tìm kiếm: Google khớp với các từ có chứa ­các từ được gõ bình thường. Kể từ năm 2017, nó dường như không còn phù hợp với các từ có chứa ­. Yandex xuất hiện để được như nhau. Bing và Yahoo dường như không phù hợp.

Kiểm tra nó

Để kiểm tra trực tiếp cập nhật, đây là một số ví dụ về các từ duy nhất có dấu gạch nối mềm.

• ­- confumbabbl­ication­ism- sự nhầm lẫn
  • .................................................. .................................................. .......... bối rối
  • .................................................. .................................................. ..............

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Trang web này loại bỏ <wbr/>khỏi đầu ra. Đây là đoạn trích jsbin.com để thử nghiệm .

• ­- eonfulbabbl­ication­ism- eonfulbabblication
  • .................................................. .................................................. ............. chủ nghĩa sai lầm
  • .................................................. .................................................. ................ eonfulbabblicationism

Ở đây họ không có dấu gạch ngang ngại ngùng (đây là để sao chép và dán vào kiểm tra tìm trên trang; được viết theo cách không phá vỡ các bài kiểm tra của công cụ tìm kiếm):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Hiển thị trên các trình duyệt

Thành công: hiển thị như một từ bình thường, ngoại trừ nơi nó sẽ bị vỡ, khi nó bị vỡ và gạch nối ở vị trí được chỉ định.

Thất bại: hiển thị bất thường, hoặc không phá vỡ ở nơi dự định.

• Chrome (40.0.2214.115, Mac): ­thành công, <wbr>thành công, ­thành công
• Firefox (35.0.1, Mac): ­thành công, <wbr>thành công, ­thành công
• Safari (6.1.2, Mac): ­thành công, <wbr> chưa được thử nghiệm , ­thành công
• Edge (Windows 10): ­thành công, <wbr> thất bại (phá vỡ nhưng không có dấu gạch ngang), ­thành công
• IE11 (Windows 10): ­thành công, <wbr> thất bại (không nghỉ ngơi), ­thành công
• IE10 (Windows 10): ­thành công, <wbr> thất bại (không nghỉ), ­thành công
• IE8 (Windows 7): thất thường - đôi khi, không ai trong số họ làm việc cả và tất cả họ chỉ làm theo css word-wrap. Đôi khi, dường như tất cả đều hoạt động. Chưa tìm thấy bất kỳ mô hình rõ ràng như tại sao.
• IE7 (Windows 7): ­thành công, <wbr>thành công, ­thành công

Sao chép-dán trên các trình duyệt

Thành công: sao chép và dán toàn bộ từ, không gạch nối. (đã thử nghiệm trên Mac dán vào tìm kiếm trình duyệt, MS Word 2011 và Văn bản tuyệt vời)

Thất bại: dán với dấu gạch nối, dấu cách, ngắt dòng hoặc với các ký tự rác.

• Chrome (40.0.2214.115, Mac): ­thành công, <wbr>thành công, ­thành công
• Firefox (35.0.1, Mac): ­thành công, <wbr>thành công, ­thành công
• Safari (6.1.2, Mac): ­ thất bại trong MS Word (dán tất cả dưới dạng dấu gạch nối), thành công trong các ứng dụng khác <wbr> không thành công , ­ thất bại trong MS Word (dán tất cả dưới dạng dấu gạch nối), thành công trong các ứng dụng khác
• IE10 (Win7): ­ fail pastes all as hyphens, <wbr> fail , ­ fail pastes all as hyphens
• IE8 (Win7): ­ thất bại dán tất cả dưới dạng dấu gạch ngang, <wbr> thất bại , ­ thất bại dán tất cả dưới dạng dấu gạch nối
• IE7 (Win7): ­ thất bại dán tất cả như dấu gạch ngang, <wbr> thất bại , ­ thất bại dán tất cả như dấu gạch ngang

Công cụ tìm kiếm phù hợp

Cập nhật vào tháng 11 năm 2017. <wbr>không được kiểm tra vì CMS của StackOverflow đã loại bỏ nó.

Thành công: tìm kiếm trên toàn bộ, từ không gạch nối tìm trang này.

Thất bại: các công cụ tìm kiếm chỉ tìm thấy trang này trên các tìm kiếm cho các đoạn bị hỏng của các từ hoặc một từ có dấu gạch nối.

• Google: ­thất bại, ­thành công
• Bing: ­thất bại, ­thất bại
• Baidu: ­thất bại, ­thất bại (có thể khớp các đoạn trong chuỗi dài hơn nhưng không phải là các từ riêng có chứa một ­hoặc ­)
• Yandex: ­thất bại, ­thành công (mặc dù có thể nó phù hợp với một đoạn chuỗi như Baidu, không chắc chắn 100%)

Tìm trên trang trên các trình duyệt

Thành công và thất bại như công cụ tìm kiếm phù hợp.

• Chrome (40.0.2214.115, Mac): ­thành công, <wbr>thành công, ­thành công
• Firefox (35.0.1, Mac): ­thành công, <wbr>thành công, ­thành công
• Safari (6.1.2, Mac): ­thành công, <wbr>thành công, ­thành công
• IE10 (Win7): ­ thất bại chỉ khớp khi cả hai đều chứa các dấu gạch ngang nhút nhát, <wbr>thành công, chỉ ­ thất bại khi cả hai đều chứa các dấu gạch ngang nhút nhát
• IE8 (Win7): ­ thất bại chỉ khớp khi cả hai đều chứa các dấu gạch ngang nhút nhát, <wbr>thành công, chỉ ­ thất bại khi cả hai đều chứa các dấu gạch ngang nhút nhát
• IE7 (Win7): ­ thất bại chỉ khớp khi cả hai đều chứa dấu gạch ngang nhút nhát, <wbr>thành công, chỉ ­ thất bại khi cả hai đều chứa dấu gạch nối nhút nhát

Có một nỗ lực liên tục để chuẩn hóa dấu gạch nối trong CSS3 .

Một số trình duyệt hiện đại, đặc biệt là Safari và Firefox, đã hỗ trợ điều này. Dưới đây là một tài liệu tham khảo tốt và cập nhật về hỗ trợ trình duyệt .

Khi dấu gạch nối CSS được triển khai phổ biến, đó sẽ là giải pháp tốt nhất. Trong thời gian chờ đợi, tôi có thể đề xuất Hyphenator - một tập lệnh JS chỉ ra cách gạch nối văn bản của bạn theo cách phù hợp nhất cho một trình duyệt cụ thể.

Dấu gạch nối:

• dựa trên thuật toán gạch nối của Franklin M. Liangs , thường được biết đến từ LaTeX và OpenOffice.
• sử dụng dấu gạch nối CSS3 khi có sẵn,
• tự động chèn ­vào hầu hết các trình duyệt khác,
• hỗ trợ nhiều ngôn ngữ
• có cấu hình cao,
• duyên dáng rơi trở lại trong trường hợp javascript không được kích hoạt.

Tôi đã sử dụng nó và nó hoạt động rất tốt!

Tôi sử dụng ­, chèn thủ công khi cần thiết.

Tôi luôn thấy tiếc rằng mọi người không sử dụng các kỹ thuật bởi vì có một số trình duyệt có thể cũ hoặc lạ, có thể xử lý chúng theo cách mà chúng được chỉ định. Tôi thấy rằng ­nó hoạt động tốt trong cả hai trình duyệt Internet Explorer và Firefox gần đây, thế là đủ. Bạn có thể bao gồm kiểm tra trình duyệt yêu cầu mọi người sử dụng một thứ gì đó trưởng thành hoặc tiếp tục tự chịu rủi ro nếu họ gặp một số trình duyệt lạ.

Việc soạn thảo không dễ dàng và tôi không thể khuyên bạn nên để nó vào một số Javascript . Đây là một chủ đề cụ thể về ngôn ngữ và có thể cần phải được sửa đổi cẩn thận bởi deskman nếu bạn không muốn nó biến văn bản của bạn trở nên khó chịu. Một số ngôn ngữ, như tiếng Đức, tạo thành các từ ghép và có khả năng dẫn đến các vấn đề phân tách. Ví dụ: mầmSpargelder ( tiền tiết kiệm, pl.) Có thể, theo quy tắc âm tiết, được gói ở hai nơi ( ). Tuy nhiên, bọc nó ở vị trí thứ hai, biến phần đầu tiên hiển thị dưới dạng ( mầm. Măng tây), kích hoạt một khái niệm hoàn toàn sai lệch trong đầu người đọc và do đó nên tránh xa.Spar-gel-derSpargel-

Còn chuỗi Wachstubethì sao? Nó có thể có nghĩa là 'phòng bảo vệ' ( Wach-stu-be) hoặc 'ống sáp' ( Wachs-tu-be). Bạn có thể có thể tìm thấy các ví dụ khác trong các ngôn ngữ khác là tốt. Bạn nên đặt mục tiêu cung cấp một môi trường trong đó deskman có thể được hỗ trợ trong việc tạo ra một văn bản có nhiều âm tiết, đọc bằng chứng mọi từ quan trọng.

Điều rất quan trọng cần lưu ý là, kể từ HTML5, <wbr>và ­ không được phép làm điều tương tự !

Hyphens mềm

­là một dấu gạch nối mềm, nghĩa là, U + 00AD: HYPHEN SOFT. Ví dụ,

innehålls­förteckning

có thể được kết xuất là

innehållsförteckning

hoặc như

innehålls-
förteckning

Cho đến hôm nay, các dấu gạch nối mềm hoạt động trong Firefox, Chrome và Internet Explorer.

các wbryếu tố

Phần wbrtử là một cơ hội ngắt từ, sẽ không hiển thị dấu gạch nối nếu xảy ra ngắt dòng. Ví dụ,

ABCDEFG<wbr/>abcdefg

có thể được kết xuất là

ABCDEFGabcdefg

hoặc như

ABCDEFG
abcdefg

Cho đến hôm nay, yếu tố này hoạt động trong Firefox và Chrome.

Các không gian zero-chiều rộng thực thể có thể được sử dụng thay cho <wbr>thẻ đáng tin cậy trên hầu như mọi nền tảng.

​

Cũng rất hữu ích là sản phẩm mộc từ tổ chức nào, mà có thể được sử dụng để ngăn cấm được nghỉ ngơi. (Chèn giữa mỗi ký tự của một từ, ngoại trừ nơi bạn muốn ngắt.)

⁠

Với hai trong số này, bạn có thể làm bất cứ điều gì.

Đây là một giải pháp crossbrowser mà tôi đã xem xét một chút trước đây chạy trên máy khách và sử dụng 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); 

Tôi đề nghị sử dụng wbr, vì vậy mã có thể được viết như thế này:

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

Nó sẽ không dẫn không gian giữa các nhà từ thiện, trong khi ­sẽ không dừng các không gian được tạo bởi các ngắt dòng.

Tôi đã sử dụng ký tự dấu gạch nối mềm thành công trong một số trình duyệt máy tính để bàn và thiết bị di động để giải quyết vấn đề.

Biểu tượng unicode là \u00ADvà khá dễ dàng để chèn vào chuỗi unicode Python như thế nào s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Giải pháp khác là chèn char unicode và chuỗi nguồn sẽ trông hoàn toàn bình thường trong các trình soạn thảo như Sublime Text, Kate, Geany, v.v (mặc dù con trỏ sẽ cảm thấy biểu tượng vô hình).

Trình chỉnh sửa hex của các công cụ trong nhà có thể tự động hóa nhiệm vụ này một cách dễ dàng.

Một loại bùn dễ dàng là sử dụng ký tự hiếm và có thể nhìn thấy, như ¦, dễ sao chép và dán, và thay thế nó trên dấu gạch nối mềm bằng cách sử dụng, ví dụ tập lệnh frontend trong $(document).ready(...). Mã nguồn như s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')dễ đọc hơn s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

Đôi khi các trình duyệt web dường như dễ tha thứ hơn nếu bạn sử dụng chuỗi Unicode ­thay vì ­thực thể.

Nếu bạn gặp xui xẻo và vẫn phải sử dụng JSF 1, thì giải pháp duy nhất là sử dụng & # 173;, & shy; không hoạt động.

<wbr> và & mắc cỡ;

Hôm nay bạn có thể sử dụng cả hai.

<wbr> sử dụng để phá vỡ và không đưa thêm thông tin.

Ví dụ, sử dụng để hiển thị các liên kết:

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

&nhát; khi cần thiết, tại thời điểm này văn bản sẽ ngắt và thêm dấu gạch nối.

Thí dụ:

"É 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>