Miękki łącznik w HTML (<wbr> a & shy;)

154

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 &shy; 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?


Zobacz powiązaną dyskusję dotyczącą SO tutaj .

Pontus
źródło
Przepraszamy za wcześniejsze zamknięcie - to jest blisko, ale nie tak samo jak poprzednie. Zamierzam jednak zostawić link.
Chris Marasti-Georg
2
Zwróć uwagę, że w <wbr>ogóle nie powinien to być łącznik.
Andreas Rejbrand
Do testowania przeglądarek: jsfiddle.net/k2hbrjz8/2 Albo & # 173; lub & nieśmiały; wydaje się działać zgodnie z oczekiwaniami przy wyświetlaniu i kopiowaniu / wklejaniu. <wbr> po dwukrotnym kliknięciu zaznacza tylko połowę słowa. Wyszukiwanie znajduje wszystko w bieżącej przeglądarce Firefox (na dzień tego komentarza). Jeśli & # 173; indeksuje lepiej, użyj go.
karmakaze,

Odpowiedzi:

132

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 , &shy;teraz działa / jest obsługiwane we wszystkich głównych przeglądarkach.

Marco
źródło
11
Niestety tak nie jest. Spróbuj wyszukać w przeglądarce słowo zawierające miękki łącznik. Większość przeglądarek traktuje to jako dwa oddzielne słowa, zamiast sympatycznego ignorowania miękkiego łącznika.
gclj5
3
@ gclj5 Właśnie przetestowałem znajdowanie &shy;słowa w Chrome v21 i poprawnie ignoruje miękki łącznik. Nie jestem pewien co do IE, FF i innych przeglądarek.
evanrmurphy
6
Działa dobrze (tzn. Słowa można wyszukiwać) w najnowszych wersjach FF, Chrome i Safari.
MMM
10
Ale skopiuj tekst za pomocą & shy; w Chrome zwraca tekst z myślnikiem. Przykład: „uczniowie & nieśmiały; później & nieśmiały; al.” skopiowane jako „uni-later-al”.
Enyby
2
Dzisiaj musieliśmy zrezygnować z &shy;użycia z powodu określonych błędów w Webkit (dotyczących najnowszych wersji Safari, Safari iOS i Chrome), powodujących renderowanie dziwnych znaków ze znaczną liczbą niestandardowych czcionek (zarówno bezpłatnych, jak i komercyjnych)
Nico Pernice
58

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

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

  • W przeglądarkach: &shy; i &#173;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 &shy;i &#173;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 &shy;i &#173;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 &#173;ze słowami wpisanymi normalnie. Wydaje się, że od 2017 r. Nie pasuje już do słów zawierających &shy;. 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.

  • &shy;- confumbabbl&shy;ication&shy;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 .

  • &#173;- eonfulbabbl&#173;ication&#173;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): &shy;sukces, <wbr>sukces, &#173;sukces
  • Firefox (35.0.1, Mac): &shy;sukces, <wbr>sukces, &#173;sukces
  • Safari (6.1.2, Mac): &shy;sukces, <wbr> jeszcze nie przetestowany , &#173;sukces
  • Edge (Windows 10): &shy;sukces, <wbr> porażka (przerwa, ale bez łącznika), &#173;sukces
  • IE11 (Windows 10): &shy;sukces, <wbr> nie (bez przerwy), &#173;sukces
  • IE10 (Windows 10): &shy;sukces, <wbr> nie (bez przerwy), &#173;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): &shy;sukces, <wbr>sukces, &#173;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): &shy;sukces, <wbr>sukces, &#173;sukces
  • Firefox (35.0.1, Mac): &shy;sukces, <wbr>sukces, &#173;sukces
  • Safari (6.1.2, Mac): &shy; niepowodzenie w programie MS Word (wkleja wszystkie jako łączniki), <wbr> niepowodzenie w innych aplikacjach , &#173; niepowodzenie w programie MS Word (wkleja wszystkie jako łączniki), powodzenie w innych aplikacjach
  • IE10 (Win7): &shy; fail wkleja wszystko jako łączniki, <wbr> fail , &#173; fail wkleja wszystko jako łączniki
  • IE8 (Win7): &shy; fail wkleja wszystko jako łączniki, <wbr> fail , &#173; fail wkleja wszystko jako łączniki
  • IE7 (Win7): &shy; fail wkleja wszystko jako łączniki, <wbr> fail , &#173; 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: &shy;porażka, &#173;sukces
  • Bing: &shy;zawodzi, &#173;zawodzi
  • Baidu: &shy;niepowodzenie, &#173;niepowodzenie (może dopasować fragmenty w dłuższych ciągach, ale nie może zawierać słów zawierających &#173;lub &shy;)
  • Yandex: &shy;niepowodzenie, &#173;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): &shy;sukces, <wbr>sukces, &#173;sukces
  • Firefox (35.0.1, Mac): &shy;sukces, <wbr>sukces, &#173;sukces
  • Safari (6.1.2, Mac): &shy;sukces, <wbr>sukces, &#173;sukces
  • IE10 (Win7): &shy; nie tylko mecze, gdy oba zawierają nieśmiałych łączniki <wbr>sukces, &#173; nie tylko mecze, gdy oba zawierają nieśmiałych myślniki
  • IE8 (Win7): dopasowuje tylko &shy; niepowodzenie, gdy oba zawierają myślniki nieśmiałe, dopasowania tylko <wbr>sukces, &#173; porażka, gdy oba zawierają myślniki nieśmiałe
  • IE7 (Win7): dopasowuje tylko &shy; niepowodzenie, gdy oba zawierają myślniki nieśmiałe, dopasowania tylko <wbr>sukces, &#173; porażka, gdy oba zawierają myślniki nieśmiałe
user56reinstatemonica8
źródło
Dziś <wbr/>działa w przeglądarkach Firefox i Chrome. (I, szczerze mówiąc, podejrzewam, że tak było nawet w lutym, przynajmniej na Windowsie.)
Andreas Rejbrand
1
Używam najnowszych wersji Chrome i Firefox w systemie Windows 7 i <wbr/>działa w obu. Zwróć uwagę, że <wbr>element nie powinien dodawać łącznika, gdy nastąpi przerwa. Innymi słowy, <wbr/>i &shy; nie robić to samo .
Andreas Rejbrand
Aha, patrząc na to, wygląda na to, że CMS SE usunął <wbr/>s z końcowego znacznika, zachowując je w kodzie źródłowym. Cholera SE! Będzie edytować ..
user56reinstatemonica8
Dziwne, nie mogę odtworzyć tego „błędu”.
Andreas Rejbrand
Czy jest jakiś sens w testowaniu &shy;i &#173;? Kiedy dotrą do DOM, są dosłownie takie same ; tylko w tokenizatorze HTML są one w ogóle różne.
gsnedders,
32

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 &shy;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!

Dominik
źródło
Firefox obsługuje tę właściwość, ale po zastosowaniu nic nie robi
bob0the0mighty
Myliłem się, Firefox działa, ale musisz podać typ lang w swoim tagu HTML.
bob0the0mighty
Wydaje się, że skrypt Hyphenator nie jest już obsługiwany, ale nowa wersja tego samego autora jest dostępna tutaj: github.com/mnater/Hyphenopoly
MattFisch
20

Używam &shy;, 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 &shy;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.

Matthias Ronge
źródło
6
Typowym przykładem w języku angielskim Spar-gelder vs. Spargel-der jest „re-cord” vs „rec-ord” (homografie, ale nie homofony). Pierwsza to czasownik, druga to rzeczownik. Algorytmy zwykle nie są do tego wystarczająco inteligentne, nawet w języku angielskim (jeden z najlepiej obsługiwanych języków w IT).
Nicholas Shanks
38
Proponowałbym wymianę ekspertów vs wymianę seksualną ekspertów
CJ Dennis
13

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

Miękkie łączniki

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

innehålls&shy;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.

Andreas Rejbrand
źródło
4

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

&#8203;

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ę.)

&#8288;

Z tymi dwoma możesz zrobić wszystko.

Geek AVL
źródło
1
Przestrzeń o zerowej szerokości (ZWSP, U + 200B, &#8203;) jest dokładnie tym, co <wbr>(iirc; minęło trochę czasu), ale lepiej obsługiwana (powszechnie, obecnie). Dokładnie tego szukałem, ponieważ nie dodaje myślnika do łamanych słów, umożliwiając np. Wartości oddzielone przecinkami zawijanie podczas wykonywania s/,/,\&#8203;/gzamiany.
Adam Katz,
2

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); 
anthonyv
źródło
2

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 &shy;nie zatrzyma spacji utworzonych przez znaki końca linii.

Weijing Jay Lin
źródło
2

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ния'.

dmitry_romanov
źródło
0

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

Tommy Kronkvist
źródło
0

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

Jaap D.
źródło
0

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

Roberto Góes
źródło