Постоје случајеви када заиста дугачки низ текста може преплавити контејнер изгледа.
На пример:
Ево кашике:
overflow-wrap: break-word;осигурава да се дугачки низ умота и да не исцури из контејнера. Могли бисте и добро да користитеword-wrapјер, како каже спецификација, то су дословно само алтернативна имена једно за друго. Неки прегледачи подржавају један, а други не. Фирефок (тестиран в43) подржава самоword-wrap. Трептање (тестирани Цхроме в45) ће потрајати било који.- Када
overflow-wrapсе користе саме за себе, речи ће се сломити некако свуда где требају. Ако постоји знак „прихватљиви прекид“ (попут дословне цртице, на пример), он ће се тамо разбити, у супротном само ради оно што треба. - Могли бисте и да користите
hyphens, јер ће тада покушати да с укусом дода цртицу где се поквари ако је прегледач подржава (Блинк то не ради у време писања, Фирефок). word-break: break-all;је да кажете прегледачу да је у реду да прекршите реч где год треба. Иако то ионако некако чини, па нисам сигуран у којим случајевима је то 100% неопходно.
Ако желите бити ручнији са цртицама, можете их предложити у свом означавању. Погледајте више на МДН страници.
Подршка прегледача
За word-break:
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
За hypens:
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
За overflow-wrap:
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
За text-overflow:
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Спречавање преливања елипсом
Други приступ који треба размотрити је скраћивање текста и додавање елипса тамо где низ текста погоди контејнер:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Ова лепа ствар код коришћења text-overflowје што је подржана универзално.
Примери
Погледајте Лонг Хипхенате Лонг Вордс од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Погледајте Пенлиплипсе од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Погледајте оловку како открива умотавање линија Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
Више ресурса
- Мицхаел Сцхарнагл: Суочавање са дугим речима у ЦСС-у
- Кеннетх Ауцхенберг: Умотавање речи / дељење речи коришћењем ЦСС-а
- МДН: прелом речи, прелом речи, цртице
- Спецификација: ЦСС ниво текста 3
За СЦСС наклоњене
То су обично ствари које посипате у код где је потребно, па чине лепе @микинс:
@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; )