2013-04-05 17 views
29

Chcę, aby opcjonalny znak łamania linii, który jest zawsze niewidoczny, działa w stylu CSS word-wrap: break-word;.Opcjonalny element HTML łamiący linie, który jest zawsze niewidoczny

Oto kilka szczegółów. Moim celem jest rozdzielenie długich linków w rozsądnych miejscach. Te znaki są dobrym miejscem na rozpoczęcie: -, ., _, /, \. To nie jest Szyny specyficzne pytanie, ale chciałem podzielić się trochę kodu używam teraz:

module ApplicationHelper 
    def with_optional_line_breaks(text) 
    text.gsub(%r{([-._/\\])}, '\1­') 
    end 
end 

Oto problem z kodem powyżej: gdy ­ wchodzi w życie (w tabeli z: word-wrap: break-word;) ­ zostanie wyświetlony jako -. Nie chcę widzieć -; Chcę przerwać linię bez pokazywanego znaku.


+0

Czy prosty tag
nie działa w tym przypadku? –

+0

@ Christopher: '
' nie jest opcjonalnym podziałem linii –

+0

Ta odpowiedź może pomóc. Nie postać, ale używa przęseł. http://stackoverflow.com/questions/5392853/html-css-denoting-a-preferred-place-for-a-line-break – Unrelated

Odpowiedz

47

​ to encja HTML dla znaku Unicode nazywanego przestrzenią o zerowej szerokości (ZWSP).

„na stronach HTML, przestrzeń ta może być używana jako potencjalny składzie przerwy w długich słów jako alternatywa dla tagu <wbr>.” - Zero-width space - Wikipedia

Znacznik <wbr> działa również, jak wspomniano przez Aaron's answer. Myślę, że wolę tę encję HTML niż tag, ponieważ encja wydaje się prostsza: obsługuje ją unicode, a nie przeglądarka internetowa.

+2

Unicode to obsługuje, ale przeglądarki internetowe nie muszą spełniać standardów Unicode lub obsługiwać tej konkretnej litery. Jest to podchwytliwy problem, ale generalnie ZWSP zawiesza się tylko w dość starych przeglądarkach, podczas gdy '' ma również osobliwości w nowszych przeglądarkach; zobacz http://www.cs.tut.fi/~jkorpela/html/nobr.html –

+1

@David, a co z niewidzialnym separatorem? Zobacz http://www.fileformat.info/info/unicode/char/2063/index.htm – Pacerier

+0

@Pacerier Wydaje się, że jest przeznaczony do matematycznych białych znaków, biorąc pod uwagę http://unicode.org/cldr/utility/list-unicodeset.jsp?a=[:subhead = Invisible%20operators:]. Z http://www.fileformat.info/info/unicode/char/2063/index.htm: "operator współzależności wskazujący, że sąsiednie symbole matematyczne tworzą listę, np. Gdy nie ma widocznego przecinka między wieloma indeksami". –

4

<wbr> wygląda to robi to, co chcesz, alewygląda na to poparcie dla niego i &shy; o to chodzi, to very inconsistent. Niestety, może nie być szczególnie dobrego sposobu robienia tego, co chcesz.

+2

Dzięki. Uwaga: twierdzenie, że obsługa przeglądarek jest niespójna, pochodzi z roku 2008. W moim systemie, nowoczesne przeglądarki (Firefox, Safari, Chrome) robią dobrze z ''. Oczekuję, że będą również pracować dla innych metod łamania słów/linii. Kompleksową księgowość można znaleźć w [Miękki łącznik (SHY) - trudny problem?] (Http://www.cs.tut.fi/~jkorpela/shy.html) –

+0

Oto odpowiedź zapewniająca dobry przegląd wsparcia technik dzielenia wyrazów/przełamywania/odspajania: https://stackoverflow.com/a/28672471/3439786 Ponadto istnieje również strona _caniuse_: http://caniuse.com/#feat=wbr-element – Dennis98

+0

Jedna zaleta '' na przestrzeni o zerowej szerokości Unicode jest to, że jeśli ciąg znaków, który chcesz przełamać, jest adresem URL, który może być skopiowany z przeglądarki (tak jak przy udostępnianiu odniesienia do strony internetowej, która nie jest łączem), encja Unicode jest kopiowana (przynajmniej w systemie MacOS), a wynikowy adres URL wygląda poprawnie w przeglądarce, ale ulega przerwaniu podczas próby uzyskania do niej dostępu. '' nie ma tego problemu. – theJBRU

Powiązane problemy