Brak podziału linii po łączniku

340

Chcę zapobiec łamaniu wiersza po łączniku -na podstawie poszczególnych przypadków, który jest zgodny ze wszystkimi przeglądarkami.

Przykład:

Mam ten tekst: 3-3/8"który w HTML to: 3-3/8”

Problem polega na tym, że pod koniec linii z powodu łącznika łamie się i zawija do następnej linii, zamiast traktować ją jak pełne słowo ...

3-
3/8"

Próbowałem wstawić znak „zero szerokości bez przerwy”, ale bez powodzenia ...

3-3/8”

Widzę to w Safari i myślę, że będzie tak samo we wszystkich przeglądarkach.

Oto moje doctypei kodowanie znaków ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Czy jest jakiś sposób, aby zapobiec łamaniu się linii po łączniku? Nie potrzebuję żadnego rozwiązania, które dotyczy całej strony ... po prostu coś, co mogę wstawić w razie potrzeby, na przykład „znak zerowej szerokości bez podziału”, oprócz tego, który działa.

Oto demo. Po prostu zmniejszaj ramkę, aż linia zepsuje się przy łączniku.

http://jsfiddle.net/RagKH/

html css character-encoding line-breaks hyphenation iskrzący
źródło
@EricLeschinski, który został już opublikowany jako odpowiedź: stackoverflow.com/a/12362315/594235
Sparky
Za pomocą charset = utf-8 możesz wstawić - niełamliwy łącznik
QuentinUK
@QuentinUK, prawda ... czy to już nie jest zaakceptowana odpowiedź? &#8209;jest niełamliwym łącznikiem.
Sparky,
& # 8209; jest zwykłym ASCII, więc utf-8 nie jest konieczny. Dzięki kodowaniu utf-8 strony można wstawić rzeczywiste znaki. - nie jest tą samą postacią co - chociaż wygląda tak samo.
QuentinUK
Poprawnym kodem HTML dla tego, co napisałeś, będzie 3-3/8&Prime;lub 3-3/8&#x2033;. Cytaty nie są liczbami pierwszymi. Jeśli chcesz to w czystym ASCII, po prostu użyj prostych podwójnych cudzysłowów zamiast ( &#x22;). Najlepiej, jeśli ma być prezentowany jako dobry, czytelny tekst, zamiast tego należy użyć 3<span style="font-variant: diagonal-fractions">3/8</style>&Prime;, wyświetlając „3⅜ ″”
Canned Man

Odpowiedzi:

579

Spróbuj użyć niełamliwego łącznika &#8209;. Zastąpiłem myślnik tą postacią w twoim jsfiddle, zmniejszyłem ramkę tak małą, jak to tylko możliwe, a linia już się tam nie dzieli.

CanSpice
źródło
10
Uznałem, że to coś w rodzaju niezniszczalnej przestrzeni, więc po prostu szukałem „niezniszczalnej kreski” i znalazłem się tutaj . :-)
CanSpice,
Ahhh ... Przeprowadziłem wyszukiwanie postaci bez przerwy i uderzyłem tym w ścianę &#65279;. Po prostu nigdy nie przyszło mi do głowy, że istnieje osobny łącznik, który się nie złamie.
Sparky,
6
W IE8 / 9 znak ten renderuje się dłużej niż typowy łącznik. Wygląda na to, że ma taki sam rozmiar jak en-dash.
mrtsherman,
21
Powodem, dla którego wynik może różnić się od zwykłego łącznika, jest to, że wiele czcionek nie zawiera niedziałającego łącznika. Zmusza to przeglądarki do korzystania z innej czcionki i chociaż niełamliwy łącznik wygląda tak samo jak zwykły łącznik w tej czcionce, nie ma gwarancji, że pasuje do zwykłego łącznika z innej czcionki.
Jukka K. Korpela
5
Myślę, że odpowiedź Deb jest najlepsza.
Ray Cheng
256

Możesz także zawinąć odpowiedni tekst

<span style="white-space: nowrap;"></span>
Deb
źródło
17
Tak, to lepsza odpowiedź niż zaakceptowane imho. Dzięki @Deb.
CMH
38
@CMH nie pomaga, jeśli chcesz zawijać białe znaki (puste miejsca, w których użytkownik widzi białe znaki - nic), ale nie chcesz dzielić słów za pomocą łączników, np. Słowa „e-mail”. Zaakceptowana odpowiedź pomaga w tym przypadku
xmojmr
12
W takim przypadku możesz po prostu użyć zakresu tylko wokół „e-maila”.
guirto
3
@CMH, to dobra odpowiedź, która również działa, więc głosowałem za nią. Jednak zdecydowałem się nie akceptować tej odpowiedzi, ponieważ poprosiłem o znak, który nie przejdzie automatycznie do następnej linii. Fakt, że „niełamliwy łącznik” ( &#8209;) może renderować się nieco dłużej niż zwykły łącznik w niektórych przeglądarkach, był dla mnie trywialny.
Sparky,
11
@Sparky Jednym z problemów związanych z używaniem różnych znaków jest to, że psuje wyniki wyszukiwania. Próba znalezienia „3-3 / 8” na stronie nie znajdzie nierozdzielającego łącznika.
Pan Lister,
23

IE8 / 9 renderuje nieprzerwany łącznik wymieniony w odpowiedzi CanSpice dłużej niż typowy łącznik. Jest to długość kreski zamiast typowego łącznika. Ta różnica w wyświetlaniu była dla mnie przełomowa.

Ponieważ nie mogłem użyć odpowiedzi CSS określonej przez Deb, zamiast tego zdecydowałem się nie używać tagów podziału.

<nobr>e-mail</nobr>

Ponadto znalazłem konkretny scenariusz, który spowodował uszkodzenie IE8 / 9 na łączniku.

  • Ciąg zawiera słowa oddzielone spacjami nierozdzielającymi - &nbsp;
  • Szerokość jest ograniczona
  • Zawiera myślnik

IE renderuje to w ten sposób.

Przykład łamania łącznika w IE8 / 9

Poniższy kod odtwarza problem przedstawiony powyżej. Musiałem użyć metatagu, aby wymusić renderowanie do IE9, ponieważ IE10 naprawił problem. Bez skrzypiec, ponieważ nie obsługuje metatagów.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>
mrtsherman
źródło
6
Korzystanie nobrjest najbardziej przeglądarką i działa niezależnie od czcionek i CSS. nobrElement nie jest zdefiniowany w specyfikacji HTML, ale to powinno być traktowane tylko jako formalność. Ale jeśli musisz pisać według specyfikacji HTML, najlepszym rozwiązaniem jest odpowiedź Deb przy użyciu CSS.
Jukka K. Korpela
5
Jestem ciekawy, dlaczego nie mogłeś skorzystać z rozwiązania CSS.
Ryan Ahearn,
2
@RyanAhearn - Używam narzędzia innej firmy, które nie daje mi dużej kontroli nad HTML. Nie obsługuje wbudowanych deklaracji znaczników.
mrtsherman
Zamiast „<nobr>” nie mógłbyś po prostu użyć zakresu z klasą i kontrolować go za pomocą CSS?
StephenESC
1
Pamiętaj, że nobrtag jest niestandardowy i może się zepsuć w dowolnym momencie. Dokumentacja MDN nie zaleca używania tego znacznika: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr
Philipp
16

Możesz to również zrobić „metodą łączenia”, wstawiając „ U+2060Word Joiner ”.

Jeśli Accept-Charsetpozwala, sam znak Unicode można wstawić bezpośrednio do wyjścia HTML.

W przeciwnym razie można to zrobić za pomocą kodowania encji. Np. Aby dołączyć do tekstu red-brown, użyj:

red-&#x2060;brown

lub (ekwiwalent dziesiętny):

red-&#8288;brown

. Inną użyteczną postacią jest „ U+FEFFZero szerokości miejsca bez przerw ” [⁠ ⁠1] :

red-&#xfeff;brown

oraz (ekwiwalent dziesiętny):

red-&#65279;brown

[1] : Pamiętaj, że chociaż ta metoda wciąż działa w głównych przeglądarkach, takich jak Chrome, jest przestarzała od Unicode 3.2 .

Porównanie „sposobu łączenia” z „ U+2011łącznikiem bez przełamywania ”:

  • Słowa łączącego można używać do wszystkich innych znaków, a nie tylko łączników.

  • Podczas używania słowa joiner większość rendererów będzie rasteryzować tekst identycznie . W Chrome, FireFox, IE i Opera renderowanie zwykłych łączników, np .:

    ABCDEFGHIJKLMNOPQRSTU VWXYZ

    jest identyczny z renderowaniem zwykłych łączników (z łącznikiem słów U + 2060), np .:

    a-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-⁠n-⁠o-⁠p-⁠q- ⁠R-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-⁠z

    podczas gdy powyższe dwa rendery różnią się od renderowania „ łącznika bez łamania ”, np .:

    a ‑ b ‑ c ‑ d ‑ e ‑ f ‑ g ‑ h ‑ i ‑ j ‑ k ‑ l ‑ m ‑ n ‑ o ‑ p ‑ q ‑ r ‑ s ‑ t ‑ u ‑ v ‑ w ‑ x ‑ y‑ z

    . (Różnica jest zależna od przeglądarki i czcionki. Np. W przypadku deklaracji czcionki „ arial” Firefox i IE11 pokazują stosunkowo duże odmiany, a Chrome i Opera pokazują mniejsze odmiany.)

Porównanie „sposobu łączenia” z <span class=c1></span>(CSS .c1 {white-space:nowrap;}) i <nobr></nobr>:

  • Słowa joiner można używać w sytuacjach, w których użycie tagów HTML jest ograniczone, np. W przypadku stron internetowych i forów.

  • Jeśli chodzi o spektrum prezentacji i treści , większość uważa słowo joiner za bliższe treści, w porównaniu do tagów.

• Testowany na 64-bitowym systemie Windows 8.1 Core przy użyciu:
    • IE 11.0.9600.18205
    • Firefox 43.0.4
    • Chrome 48.0.2564.109 (oficjalna wersja) m (32-bit)
    • Opera 35.0.2066.92

Pacerier
źródło
Wygląda na to, że „U + FEFF Zero Szerokość No-break Space” nie działa poprawnie w IE11.
Ivan Gusev
Wygląda na to, że „U + 2060” nie działa, jeśli po „-” występuje znak Unicode: w ten sposóbbingo-&#8288;bongo
Ivan Gusev
Pomimo ciągłej negatywnej &#xfeff;
presji
6

Późno na imprezę, ale myślę, że to najbardziej eleganckie. Użyj znaku WORD JOINER Unicode & # 8288 ; po obu stronach łącznika, myślnika lub dowolnej postaci.

Więc tak:

&#8288;—&#8288;

Spowoduje to połączenie symbolu na obu końcach z sąsiadami (bez dodawania spacji) i zapobiegnie łamaniu linii.

Eckstein
źródło
Udało mi się to uruchomić za pomocą ALT + 0173 (miękki łącznik) z jakiegoś powodu w systemie Windows 10.
pspahn