Ir reizes, kad patiešām gara teksta virkne var pārpildīt izkārtojuma konteineru.
Piemēram:
Lūk, liekšķere:
overflow-wrap: break-word;pārliecinās, ka garā aukla ietīsies un neizkritīs no trauka. Jūs varētu arī izmantotword-wrap, jo, kā saka spec, tie ir burtiski tikai alternatīvi nosaukumi viens otram. Dažas pārlūkprogrammas atbalsta vienu, nevis otru. Firefox (pārbaudīts v43) atbalsta tikaiword-wrap. Blink (pārbaudīts Chrome v45) izmantos vienu vai otru.- Ar
overflow-wraplieto visi ar sevi, vārdi pārtraukums kinda nekur viņi ir nepieciešams. Ja ir raksturs “pieņemams pārtraukums” (piemēram, burtiskā domuzīme), tas tur salūzt, pretējā gadījumā tas vienkārši dara to, kas jādara. - Jūs varētu arī izmantot
hyphens, jo tad tas mēģinās gaumīgi pievienot defisi, kur tā saplīst, ja pārlūks to atbalsta (Blink rakstīšanas laikā to nedara, Firefox to dara). word-break: break-all;ir pateikt pārlūkam, ka ir pareizi lauzt vārdu visur, kur tas nepieciešams. Lai gan tas kaut ko tā dara, tāpēc es neesmu pārliecināts, kādos gadījumos tas ir 100% nepieciešams.
Ja vēlaties, lai būtu vairāk manuālu ar defisēm, varat tos ieteikt marķējumā. Skatīt vairāk MDN lapā.
Pārlūkprogrammas atbalsts
Par word-break:
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 44. | 15 | 5.5 | 12 | 9 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 9.0-9.2 |
Par hypens:
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 4,2–4,3 * |
Par overflow-wrap:
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Par text-overflow:
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Pārliešanas novēršana ar elipses palīdzību
Vēl viena pieeja, kas jāapsver, ir teksta saīsināšana un elipses pievienošana vietās, kur teksta virkne nonāk konteinerā:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Šī jaukā lietošanas lieta text-overflowir tā, ka tā tiek atbalstīta universāli.
Piemēri
Skatiet CSS-Tricks (@ css-tricks) CSP-Tricks pildspalvveida pilnšļirces vārdus.
Skatiet CSS-Tricks pildspalvu elipses (@ css-tricks) vietnē CodePen.
Skatiet Chris Coyier (@chriscoyier) pildspalvas attēlojuma līnijas aptinumu vietnē CodePen.
Vairāk resursu
- Maikls Šarnagls: Darīšana ar gariem vārdiem CSS
- Kenets Auhenbergs: vārdu satīšana / defise, izmantojot CSS
- MDN: vārdu ietīšana, vārdu pārtraukums, defises
- Specifikācija: CSS teksta 3. līmenis
Par SCSS slīpi
Šīs mēdz būt tādas lietas, kuras jūs, ja nepieciešams, pārkaisa kodā, tāpēc tās ir jaukas @mixins:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )