Hvordan word-break på en dash?

stemmer
61

Gitt en relativt enkel CSS:

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

Hvordan gjør jeg det slik at strengen forblir begrenset til widthover 150 , og rett og slett wraps til et linjeskift på bindestrek?

Publisert på 04/08/2008 klokken 00:17
kilden bruker
På andre språk...                            


11 svar

stemmer
64

Bytt ut bindestreker med dette:

&shy;

Det kalles en "myk" bindestrek.

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

Svarte 04/08/2008 kl. 00:25
kilden bruker

stemmer
32

I alle moderne nettlesere * (og i noen eldre nettlesere , også), det <wbr>element er det perfekte verktøyet for å gi muligheten til å bryte lange ord på bestemte punkter.

For å sitere fra denne linken:

Ordet Break mulighet ( <wbr>) HTML-element representerer en posisjon innenfor tekst der leseren kan eventuelt brekke en linje, selv om dens linjebrytende regler ellers ikke ville skape et brudd på dette sted.

Her er hvordan det kunne brukes til i OP 'eksempel (eller se den i aksjon på JSFiddle ):

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

* Jeg har testet den i IE9, IE10, og de nyeste versjonene av Chrome, Firefox og Opera og Safari.

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

Svarte 30/01/2012 kl. 06:53
kilden bruker

stemmer
17

Som en del av CSS3, er det ennå ikke støttes fullt ut, men du kan finne informasjon om ord-innpakning her . Et annet alternativ er WBR tag, og sjenert ;, og & # 8203; ingen av disse er fullt ut understøttet enten.

Svarte 04/08/2008 kl. 00:25
kilden bruker

stemmer
8

I dette konkrete tilfellet (hvor strengen skal inneholde bindestrek) Jeg vil omforme teksten til denne server-side:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Svarte 05/12/2008 kl. 12:36
kilden bruker

stemmer
8

Ditt eksempel fungerer som forventet i Google Chrome, Safari (Windows), og IE8. Teksten bryter ut av 150px boksen i Firefox 3 og Opera 9.5.

I tillegg &shy;vil ikke fungere for eksempel, så vil det enten:

  • jobbe når ordet brytende, men når ikke ord bryt ikke vise noen bindestrek, eller

  • arbeid når ikke ord brytende, men skjermen to bindestreker når ordet brytende siden det legger en bindestrek på en pause.

Svarte 15/09/2008 kl. 23:15
kilden bruker

stemmer
7

Avhengig av hva du ønsker å se nøyaktig, kan du bruke en kombinasjon av hyphen, soft hyphenog / eller zero width space.

På en myk bindestrek, kan nettleseren word-break (legge til en bindestrek). På en null bredde mellomrom, nettleseren din kan ordet break (uten å legge noe).

Dermed, hvis koden er noe sånt som:

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

deretter nettleseren vil vise dette med ingen ord-break:

1111112222222-33333334444444-5555555

Og dette vil alle mulige ord-break:

111111-
222222-
-333333
444444-
555555

Bare plukke opp alternativet du trenger. I ditt tilfelle, kan det være en mellom 4s og 5s.

Svarte 16/09/2010 kl. 09:04
kilden bruker

stemmer
1

Håper dette kan hjelpe

bruker <br>(pause) tag hvor du ønsker å bryte linjen.

Svarte 31/08/2017 kl. 10:53
kilden bruker

stemmer
1

Du kan også bruke:

word-break:break-all;

ex.

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

produksjon:

abababababa
ababababbba
abbabbababa
ababb

word-break er å bryte all ordet eller linjen selv om ingen plass i setningen som ikke feets i gitt bredde eller høyde. mutter for at du må være å gi en bredde eller høyde.

Svarte 27/08/2015 kl. 12:40
kilden bruker

stemmer
0

Du kan bruke 0 bredde mellomrom etter bindestrek karakter:

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

Hvis du ønsker linjeskift før bindestrek bruke &#8203;-i stedet.

Svarte 13/09/2018 kl. 10:21
kilden bruker

stemmer
0

I stedet for -at du kan bruke &hyphen;eller \u2010.

Sørg også for at bindestrek css hotellet ble ikke satt til ingen (Standardverdien er manuell ).

<wbr>støttes ikke av Internet Explorer .

Svarte 14/05/2015 kl. 04:29
kilden bruker

stemmer
0

Den ikke-breaking bindestrek fungerer godt.

HTML Entity (desimal)

&#8209;
Svarte 21/03/2014 kl. 22:09
kilden bruker

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