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-&#65279;3/8&rdquo;

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/

— 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ź? ‑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″lub 3-3/8″. Cytaty nie są liczbami pierwszymi. Jeśli chcesz to w czystym ASCII, po prostu użyj prostych podwójnych cudzysłowów zamiast ( "). Najlepiej, jeśli ma być prezentowany jako dobry, czytelny tekst, zamiast tego należy użyć 33/8</style>″, wyświetlając „3⅜ ″”

— Canned Man

579

Spróbuj użyć niełamliwego łącznika ‑. 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ę . 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” ( ‑) 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 -  
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 „” 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 (CSS .c1 {white-space:nowrap;}) i :

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

— Ivan Gusev

Pomimo ciągłej negatywnej 

— 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