overflow-wrapИмовина у ЦСС-у Вам омогућава да одредите да претраживач може сломити линију текста унутар циљаног елемента на више линија у иначе непробојним месту. Ово помаже да се избегне необично дугачак низ текста који узрокује проблеме са распоредом због преливања.
.example ( overflow-wrap: break-word; )Вредности
normal: подразумевано. Прегледач ће прекидати линије у складу са правилима нормалног прелома линија. Речи или непрекинути низови неће се прекидати, чак и ако преплаве контејнер.break-word: речи или низови знакова који су превелики да би стали у њихов контејнер преломиће се на произвољном месту да би се принудио прекид реда. Цртица неће бити уметнута, чак и акоhyphensсе користи својство.inherit: циљани елемент мора наследити вредностoverflow-wrapсвојства дефинисаног на његовом непосредном родитељу.
Демо у наставку има дугме за пребацивање које вам омогућава да се пребацујете између normalи break-word.
Погледајте демо Пен оверфлов-врап / ворд-врап који је написао Лоуис Лазарис (@импрессивевебс) на ЦодеПен-у.
Да би демонстрирао проблем који overflow-wrapпокушава да реши, демонстрација користи необично дугачку реч у релативно малом контејнеру. Када break-wordукључите, реч је преломљена како би прилагодила малу количину доступног простора, као да је реч више речи.
Низ неразбијајућих размака ( ) би се третирао на исти начин и такође би се преломио на одговарајућем месту.
overflow-wrapје користан када се примењује на елементе који садрже немодерирани кориснички генерисани садржај (попут одељака коментара). Ово може спречити дуге УРЛ адресе и друге непрекинуте низове текста (нпр. Вандализам) да не наруше изглед веб странице.
Сличности са word-breakсвојином
overflow-wrapи word-breakпонашају се врло слично и могу се користити за решавање сличних проблема. Основни резиме разлике, како је објашњено у ЦСС спецификацији је:
overflow-wrapсе обично користи за избегавање проблема са дугим низовима који узрокују покварене распореде због текста који тече изван контејнера.word-breakодређује могућности меког умотавања између слова која се обично повезују са језицима попут кинеског, јапанског и корејског (ЦЈК).
Након описа примера како word-breakсе може користити у садржају ЦЈК, спецификација каже: „Да бисте омогућили додатне могућности прекида само у случају преливања, погледајте overflow-wrap“.
Из овога можемо претпоставити да word-breakсе најбоље користи са неенглеским садржајем који захтева посебна правила за разбијање речи и који би могао бити прошаран енглеским садржајем, док overflow-wrapби се требало користити за избегавање покварених распореда због дугих низова, без обзира на језик који се користи .
Историјска word-wrapсвојина
overflow-wrapје стандардни назив за свог претходника, word-wrapсвојство. word-wrapје првобитно била власничка функција само за Интернет Екплорер која је на крају подржана у свим прегледачима, иако није била стандард.
word-wrapприхвата исте вредности као overflow-wrapи понаша се на исти начин. Према спецификацији, прегледачи „морају да се понашају word-wrapкао према алтернативном имену overflow-wrapсвојства, као да је то скраћеница од overflow-wrap„. Такође, сви кориснички агенти морају да подржавају на word-wrapнеодређено време, из старих разлога.
И једно overflow-wrapи друго word-wrapће проћи ЦСС валидацију све док је валидатор подешен за тестирање против ЦСС3 или новијег (тренутно подразумевано).
Повезан
- прелом речи
- цртице
- бели простор
- Руковање дугим речима и УРЛ-овима
Више информација
- Обим речи: ЦСС3 својство које ради у сваком прегледачу
- Преливање омотача на В3Ц
- Дискусија о преливању стека на
word-breakвс.overflow-wrap
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Горе наведена „делимична“ подршка је због тога што старији прегледачи подржавају, word-wrapали не overflow-wrap. Употреба оба може осигурати компатибилност уназад.
Уредникова верзија нацрта спецификације В3Ц укључује нову вредност која се назива break-spacesсеквенцама „сачуваних“ празних знакова. Не постоји позната подршка прегледача за ову функцију и она није укључена у верзију радне верзије спецификације.