Jak złamać słowo na kreskę?

We wszystkich nowoczesnych przeglądarkach^* (a także w niektórych starszych przeglądarkach ),<wbr> element jest idealnym narzędziem do zapewnienia możliwości łamania długich słów w określonych punktach.

Cytuję z tego linku:

The Word Break Opportunity (<wbr>) element HTML reprezentuje pozycję w tekście, w której przeglądarka może opcjonalnie złamać linię, chociaż jej reguły łamania linii nie tworzyłyby przerwy w tym miejsce.

Oto jak można go użyć w przykładzie OP (lub zobaczyć go w akcji w JSFiddle):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

^*testowałem go w IE9, IE10 i najnowszych wersjach Chrome, Firefox, Opera i Safari.

div {
  width: 150px;
}

<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Jako część CSS3, nie jest jeszcze w pełni obsługiwany, ale informacje na temat Word-wrapping można znaleźć tutaj . Inną opcją jest znacznik wbr, i żaden z nich nie jest w pełni obsługiwany.

Twój przykład działa zgodnie z oczekiwaniami w Google Chrome, Safari (Windows) i IE8. Tekst wyłamuje się z pola 150px w Firefoksie 3 i operze 9.5.

DODATKOWO ­ nie będzie działać na twoim przykładzie, ponieważ również:

• Praca przy łamaniu słów, ale gdy nie łamanie słów, nie wyświetla żadnych myślników, lub

• Praca, gdy nie łamanie słów, ale wyświetlanie dwóch myślników podczas łamania słów ponieważ dodaje myślnik w przerwie.

W tym konkretnym przypadku (gdzie twój ciąg znaków będzie zawierał myślniki) zamieniłbym tekst na ten Serwer:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

W zależności od tego, co dokładnie chcesz zobaczyć, możesz użyć kombinacji hyphen, soft hyphen, i / lub zero width space.

Na miękkim myślniku twoja przeglądarka może łamać słowa (dodając myślnik). Na przestrzeni o zerowej szerokości przeglądarka może łamać słowa (bez dodawania czegokolwiek).

Zatem, jeśli twój kod to coś w stylu:

111111­222222­-333333​444444-​555555

Wtedy twoja przeglądarka pokaże to bez przerwy:

1111112222222-33333334444444-5555555

I to wszystko będzie możliwe Word-break:

111111-
222222-
-333333
444444-
555555

Możesz również użyć :

word-break:break-all;

Ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

Wyjście:

abababababa
ababababbba
abbabbababa
ababb

Word-break jest łamaniem całego słowa lub linii, nawet jeśli nie ma spacji w zdaniu, które nie ma stopy w podanej szerokości lub wysokości. nakrętka do tego należy podać szerokość lub wysokość.

Hope this may help

Użyj znacznika <br> (break), gdzie chcesz przerwać linię.

Niełamliwy myślnik działa dobrze.

Encja HTML (dziesiętna)

‑

Zamiast - możesz użyć ‐ lub \u2010.

Upewnij się również, że właściwośćmyślniki css byłaa nie ustawiona nanone (domyślną wartością jestmanual ).

<wbr> nie jest obsługiwany przez Internet Explorer.

Możesz użyć spacji o szerokości 0 po znaku myślnika:

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

Jeśli chcesz przełamać linię przed myślnikiem, użyj ​-.