Jak rozwiązać problem z miękkimi łącznikami na stronach internetowych? W tekście mogą znajdować się długie słowa, które możesz chcieć przełączyć myślnikiem. Ale nie chcesz, aby łącznik pokazywał, czy całe słowo znajduje się w tym samym wierszu.

Zgodnie z komentarzami na tej stronie <wbr> jest to niestandardowa "zupa z tagów wymyślona przez Netscape". Wygląda na to, że ­ ma również swoje problemy ze zgodnością ze standardami . Wydaje się, że nie ma możliwości uzyskania działającego rozwiązania dla wszystkich przeglądarek .

W jaki sposób radzisz sobie z miękkimi łącznikami i dlaczego go wybrałeś? Czy istnieje preferowane rozwiązanie lub najlepsza praktyka?

Niestety, &shyobsługa między przeglądarkami jest tak niespójna, że ​​nie można jej naprawdę używać.

QuirksMode ma rację - w tej chwili nie ma dobrego sposobu na używanie miękkich łączników w HTML. Zobacz, co możesz zrobić, aby się bez nich obejść.

Edycja 2013: Według QuirksMode , ­teraz działa / jest obsługiwane we wszystkich głównych przeglądarkach.

Podsumowanie lutego 2015 r. (Częściowo zaktualizowane listopad 2017 r.)

Wszystkie działają całkiem nieźle, ograniczają ­to, ponieważ Google wciąż może indeksować zawierające je słowa.

• W przeglądarkach: ­ i ­obie wyświetlają się zgodnie z oczekiwaniami w głównych przeglądarkach (nawet w starym IE!). <wbr>nie jest obsługiwany w najnowszych wersjach IE (10 lub 11) i nie działa poprawnie w Edge.
• Po skopiowaniu i wklejeniu z przeglądarek: (testowano w 2015 r.) Zgodnie z oczekiwaniami dla ­i ­dla Chrome i Firefox na Macu, w systemie Windows (10), zachowuje znaki i wkleja twarde łączniki do Notatnika i niewidoczne miękkie łączniki do aplikacji, które je obsługują. IE (win7) zawsze wkleja łączniki, nawet w IE10, a kopie Safari (Mac) w sposób, który wkleja się jako łączniki w niektórych aplikacjach (np. MS Word), ale nie w innych
• Znajdź na stronie robót dla ­i ­na wszystkich przeglądarkach z wyjątkiem IE który pasuje tylko dokładny kopiowanych i-wklejonych mecze (nawet do IE11)
• Wyszukiwarki: Google dopasowuje słowa zawierające ­ze słowami wpisanymi normalnie. Wydaje się, że od 2017 r. Nie pasuje już do słów zawierających ­. Yandex wygląda tak samo. Wydaje się, że Bing i Baidu również nie pasują do siebie.

Sprawdź to

Aby zapoznać się z aktualnymi testami na żywo, oto kilka przykładów unikalnych słów z miękkimi łącznikami.

• ­- confumbabbl­ication­ism- konfumbabblikacjonizm
  • .................................................. .................................................. .......... konfumbabblicationism
  • .................................................. .................................................. .............. konfumbabblicationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Ta witryna usuwa <wbr/>z danych wyjściowych. Oto fragment kodu jsbin.com do testowania .

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

Tutaj są bez nieśmiałych myślników (to jest do kopiowania i wklejania do testów znajdowania na stronie; napisane w sposób, który nie złamie testów wyszukiwarki):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Wyświetlaj w różnych przeglądarkach

Sukces: wyświetlanie jako zwykłego słowa, z wyjątkiem miejsca, w którym powinno się łamać, gdy łamie się i łączy w określonym miejscu.

Awaria: wyświetlanie nietypowe lub brak przerwy w przewidzianym miejscu.

• Chrome (40.0.2214.115, Mac): ­sukces, <wbr>sukces, ­sukces
• Firefox (35.0.1, Mac): ­sukces, <wbr>sukces, ­sukces
• Safari (6.1.2, Mac): ­sukces, <wbr> jeszcze nie przetestowany , ­sukces
• Edge (Windows 10): ­sukces, <wbr> porażka (przerwa, ale bez łącznika), ­sukces
• IE11 (Windows 10): ­sukces, <wbr> nie (bez przerwy), ­sukces
• IE10 (Windows 10): ­sukces, <wbr> nie (bez przerwy), ­sukces
• IE8 (Windows 7): nieobliczalny - czasami żaden z nich w ogóle nie działa i wszystkie po prostu podążają za css word-wrap. Czasami wydaje się, że wszystkie działają. Nie znalazłem jeszcze żadnego wyraźnego wzoru, dlaczego.
• IE7 (Windows 7): ­sukces, <wbr>sukces, ­sukces

Kopiuj i wklej w różnych przeglądarkach

Sukces: skopiowanie i wklejenie całego słowa bez dzielenia. (testowane na komputerze Mac wklejanie do wyszukiwania w przeglądarce, MS Word 2011 i Sublime Text)

Niepowodzenie: wklejanie z łącznikiem, spacją, łamaniem wiersza lub niepotrzebnymi znakami.

• Chrome (40.0.2214.115, Mac): ­sukces, <wbr>sukces, ­sukces
• Firefox (35.0.1, Mac): ­sukces, <wbr>sukces, ­sukces
• Safari (6.1.2, Mac): ­ niepowodzenie w programie MS Word (wkleja wszystkie jako łączniki), <wbr> niepowodzenie w innych aplikacjach , ­ niepowodzenie w programie MS Word (wkleja wszystkie jako łączniki), powodzenie w innych aplikacjach
• IE10 (Win7): ­ fail wkleja wszystko jako łączniki, <wbr> fail , ­ fail wkleja wszystko jako łączniki
• IE8 (Win7): ­ fail wkleja wszystko jako łączniki, <wbr> fail , ­ fail wkleja wszystko jako łączniki
• IE7 (Win7): ­ fail wkleja wszystko jako łączniki, <wbr> fail , ­ fail wkleja wszystko jako łączniki

Dopasowanie do wyszukiwarek

Zaktualizowano w listopadzie 2017 r. <wbr>Nie testowano, ponieważ CMS StackOverflow go pozbawił.

Sukces: wyszukiwanie w całości, bez dzielonego wyrazu, znajduje tę stronę.

Błąd: wyszukiwarki znajdują tę stronę tylko w wynikach wyszukiwania uszkodzonych segmentów słów lub słowa z łącznikami.

• Google: ­porażka, ­sukces
• Bing: ­zawodzi, ­zawodzi
• Baidu: ­niepowodzenie, ­niepowodzenie (może dopasować fragmenty w dłuższych ciągach, ale nie może zawierać słów zawierających ­lub ­)
• Yandex: ­niepowodzenie, ­sukces (choć możliwe, że pasuje do fragmentu ciągu, takiego jak Baidu, nie jest w 100% pewien)

Znajdź na stronie w różnych przeglądarkach

Sukces i porażka jako dopasowanie do wyszukiwarek.

• Chrome (40.0.2214.115, Mac): ­sukces, <wbr>sukces, ­sukces
• Firefox (35.0.1, Mac): ­sukces, <wbr>sukces, ­sukces
• Safari (6.1.2, Mac): ­sukces, <wbr>sukces, ­sukces
• IE10 (Win7): ­ nie tylko mecze, gdy oba zawierają nieśmiałych łączniki <wbr>sukces, ­ nie tylko mecze, gdy oba zawierają nieśmiałych myślniki
• IE8 (Win7): dopasowuje tylko ­ niepowodzenie, gdy oba zawierają myślniki nieśmiałe, dopasowania tylko <wbr>sukces, ­ porażka, gdy oba zawierają myślniki nieśmiałe
• IE7 (Win7): dopasowuje tylko ­ niepowodzenie, gdy oba zawierają myślniki nieśmiałe, dopasowania tylko <wbr>sukces, ­ porażka, gdy oba zawierają myślniki nieśmiałe

Trwają prace nad standaryzacją dzielenia wyrazów w CSS3 .

Niektóre nowoczesne przeglądarki, zwłaszcza Safari i Firefox, już to obsługują. Oto dobre i aktualne informacje o obsłudze przeglądarek .

Gdyby dzielenie wyrazów CSS zostało zaimplementowane uniwersalnie, byłoby to najlepsze rozwiązanie. W międzyczasie mogę polecić Hyphenator - skrypt JS, który wymyśla, jak dzielić tekst w sposób najbardziej odpowiedni dla danej przeglądarki.

Dzielnik:

• opiera się na algorytmie dzielenia wyrazów Franklina M. Liangsa , powszechnie znanym z LaTeX i OpenOffice.
• używa dzielenia wyrazów CSS3, jeśli jest to możliwe,
• automatycznie wstawia ­w większości innych przeglądarek,
• obsługuje wiele języków,
• jest wysoce konfigurowalny,
• z wdziękiem cofa się, jeśli javascript nie jest włączony.

Użyłem go i działa świetnie!

Używam ­, w razie potrzeby wkładam ręcznie.

Zawsze szkoda, że ​​ludzie nie używają technik, ponieważ jest jakaś - może stara lub dziwna - przeglądarka, która nie obsługuje ich tak, jak zostały określone. Zauważyłem, że ­działa poprawnie zarówno w najnowszych przeglądarkach Internet Explorer, jak i Firefox, to powinno wystarczyć. Możesz dołączyć kontrolę przeglądarki, która mówi ludziom, aby używali czegoś dojrzałego lub kontynuowali na własne ryzyko, jeśli natkną się na jakąś dziwną przeglądarkę.

Sylabifikacja nie jest taka prosta i nie polecam pozostawiania jej w jakimś Javascript . Jest to temat specyficzny dla języka i może wymagać dokładnej rewizji przez pracownika recepcji, jeśli nie chcesz, aby tekst był irytujący. Niektóre języki, takie jak niemiecki, tworzą słowa złożone i mogą powodować problemy z rozkładem. Np. Spargelder( Zarazki. Zaoszczędzone pieniądze, pl.) Można, zgodnie z regułami sylabowania, zawinąć w dwa miejsca ( Spar-gel-der). Jednak zawijanie go w drugiej pozycji powoduje, że pierwsza część pojawia się jako Spargel-( zarodek. Szparagi), aktywując całkowicie mylącą koncepcję w głowie czytelnika i dlatego należy jej unikać.

A co ze sznurkiem Wachstube? Może to oznaczać „wartownię” ( Wach-stu-be) lub „rurkę wosku” ( Wachs-tu-be). Prawdopodobnie znajdziesz również inne przykłady w innych językach. Powinieneś dążyć do zapewnienia środowiska, w którym pracownik biurowy może uzyskać wsparcie w tworzeniu dobrze podzielonego na sylaby tekstu, sprawdzając każde krytyczne słowo.

Bardzo ważne jest, aby zauważyć, że tak jak w przypadku HTML5 <wbr>i ­ nie powinny robić tego samego !

Miękkie łączniki

­to miękki łącznik, tj. U + 00AD: ŁĄCZNIK MIĘKKI. Na przykład,

innehålls­förteckning

mogą być renderowane jako

innehållsförteckning

lub jako

innehålls-
förteckning

Od dzisiaj miękkie łączniki działają w przeglądarkach Firefox, Chrome i Internet Explorer.

wbrelementem

wbrElementem jest okazja word-break, który nie będzie wyświetlany myślnik w przypadku wystąpienia przerwy w linii. Na przykład,

ABCDEFG<wbr/>abcdefg

mogą być renderowane jako

ABCDEFGabcdefg

lub jako

ABCDEFG
abcdefg

Na dzień dzisiejszy ten element działa w przeglądarkach Firefox i Chrome.

Jednostka przestrzeni o zerowej szerokości może być <wbr>niezawodnie używana zamiast znacznika na praktycznie każdej platformie.

​

Przydatne jest również słowo łącznik , którego można użyć do zakazania przerwy. (Wstaw między każdym znakiem słowa, z wyjątkiem miejsca, w którym chcesz wstawić przerwę.)

⁠

Z tymi dwoma możesz zrobić wszystko.

To jest rozwiązanie crossbrowser, na które patrzyłem jakiś czas temu, które działa na kliencie i używa 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); 

Proponuję użyć wbr, więc kod można napisać w ten sposób:

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

Nie będzie prowadzić spacji między postaciami, a także ­nie zatrzyma spacji utworzonych przez znaki końca linii.

W kilku przeglądarkach na komputery stacjonarne i urządzenia mobilne z powodzeniem użyłem znaków Unicode miękkich łączników, aby rozwiązać problem.

Symbol Unicode jest \u00ADi jest dość łatwy do wstawienia do łańcucha znaków Unicode w Pythonie, jak np s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Innym rozwiązaniem jest wstawienie samego znaku Unicode, a ciąg źródłowy będzie wyglądał zupełnie zwyczajnie w edytorach, takich jak Sublime Text, Kate, Geany itp. (Choć kursor poczuje niewidoczny symbol).

Szesnastkowe edytory wewnętrznych narzędzi mogą łatwo zautomatyzować to zadanie.

Łatwym kludge jest użycie rzadkich i widocznych znaków, takich jak ¦, które można łatwo skopiować i wkleić, i zamienić je na miękki łącznik, używając np. Skryptu frontendowego w $(document).ready(...). Kod źródłowy taki jak s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')jest łatwiejszy do odczytania niż s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

Czasami przeglądarki internetowe wydają się być bardziej wyrozumiałe, jeśli używasz ciągu znaków Unicode ­zamiast ­jednostki.

Jeśli masz pecha i nadal musisz korzystać z JSF 1, jedynym rozwiązaniem jest użycie & # 173 ;, & shy; nie działa.

<wbr> i & nieśmiały;

Dziś możesz używać obu.

<wbr> używaj do łamania i nie umieszczaj więcej informacji.

Przykład, użyj, aby wyświetlić linki:

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

&nieśmiały; w razie potrzeby w tym miejscu tekst zostanie podzielony i dodany zostanie łącznik.

Przykład:

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