Jak słowo-break na desce rozdzielczej?

głosy
60

Biorąc pod uwagę stosunkowo prosty CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Jak zrobić to tak, że ciąg pozostaje ograniczona do widthod 150 , a po prostu zawija do nowej linii na myślnikiem?

Utwórz 04/08/2008 o 01:17
źródło użytkownik
W innych językach...                            


11 odpowiedzi

głosy
63

Wymień łączniki z tym:

&shy;

To się nazywa „miękki” myślnik.

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Odpowiedział 04/08/2008 o 01:25
źródło użytkownik

głosy
31

We wszystkich nowoczesnych przeglądarek * (aw niektórych starszych przeglądarek , też), przy czym <wbr>elementem jest idealnym narzędziem do zapewnienia możliwość przełamania długich słów w określonych punktach.

Cytując z tego linku:

The Break Szansa Słowo ( <wbr>) element HTML oznacza pozycję w tekście, gdzie przeglądarka może ewentualnie przełamać linię, choć jego zasady łamania linii w przeciwnym razie nie tworzyć przerwę w tej lokalizacji.

Oto jak może on być stosowany w przykładzie PO (lub zobaczyć go w akcji na JSFiddle ):

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

* Przetestowałem go w IE9, IE10 i najnowszymi wersjami Chrome, Firefox i Opera i Safari.

div {
  width: 150px;
}
<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Odpowiedział 30/01/2012 o 07:53
źródło użytkownik

głosy
17

W ramach CSS3, nie jest jeszcze w pełni obsługiwane, ale można znaleźć informacje na temat Zawijanie wierszy tutaj . Inną opcją jest tag WBR, & nieśmiały ;, a & # 8203; z których żaden nie są w pełni obsługiwane albo.

Odpowiedział 04/08/2008 o 01:25
źródło użytkownik

głosy
8

W tym konkretnym przypadku (gdzie ciąg będzie zawierać myślniki) Chciałbym przekształcić tekst na tej stronie serwera:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Odpowiedział 05/12/2008 o 13:36
źródło użytkownik

głosy
8

Twój przykład działa zgodnie z oczekiwaniami w Google Chrome, Safari (Windows) i IE8. Tekst wybucha z pudełka 150px Firefox 3 oraz Opera 9.5.

Dodatkowo &shy;nie będzie działać na swoim przykładzie, jak to będzie albo:

  • działa, gdy słowo łamanie ale kiedy nie słowo łamanie nie wyświetla żadnych łączników lub

  • Prace gdy słowo nie łamiących ale wyświetlacz dwa myślniki gdy słowo łamanie ponieważ Dodaje łącznik na przerwie.

Odpowiedział 16/09/2008 o 00:15
źródło użytkownik

głosy
7

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

Na miękkim myślnikiem, przeglądarka może word-break (dodanie myślnika). Na przestrzeni zerowej szerokości, przeglądarka może słowo przerwa (bez dodawania czegokolwiek).

Tak więc, jeśli kod jest coś takiego:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

Następnie przeglądarka pokaże to słowo bez przerwy:

1111112222222-33333334444444-5555555

a to każdy możliwy słowo-break:

111111-
222222-
-333333
444444-
555555

Wystarczy podnieść opcję trzeba. W twoim przypadku może to być jeden między 4S i 5S.

Odpowiedział 16/09/2010 o 10:04
źródło użytkownik

głosy
1

Możesz także użyć :

word-break:break-all;

dawny.

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

wydajność:

abababababa
ababababbba
abbabbababa
ababb

word-break jest złamać cały wyraz lub wiersz nawet jeśli nie-miejsca w zdaniu, że nie feets w przewidzianym szerokości lub wysokości. Nakrętka do tego trzeba być zapewnienie szerokość lub wysokość.

Odpowiedział 27/08/2015 o 12:40
źródło użytkownik

głosy
0

Można użyć 0 szerokości spacji po znaku łącznikowi:

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

jeśli chcesz złamać linię przed myślnikiem używać &#8203;-zamiast.

Odpowiedział 13/09/2018 o 10:21
źródło użytkownik

głosy
0

Nadzieję, że może to pomóc

korzystać <br>(przerwa) tag gdzie chcesz złamać linię.

Odpowiedział 31/08/2017 o 10:53
źródło użytkownik

głosy
0

Zamiast -można użyć &hyphen;lub\u2010 .

Ponadto, upewnij się, że łączniki nieruchomość została css nie ustawiona na none (Domyślna wartość to instrukcja ).

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

Odpowiedział 14/05/2015 o 04:29
źródło użytkownik

głosy
0

Non-breaking myślnik działa dobrze.

HTML Entity (po przecinku)

&#8209;
Odpowiedział 21/03/2014 o 23:09
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more