Како пребацити текст у нову линију у ЦСС -у

Како пребацити текст у нову линију у ЦСС -у

Дуги текстови могу изгледати неконтролисано током веб дизајна. Али и они могу бити неизбежни, а понекад заврше и преласком граница. Ово може створити лабави објектни модел документа (ДОМ) са непотребним преливањем које није прилагођено кориснику.





Али ево добрих вести: можете се носити са тако дугим текстовима тако што ћете их пребацити у нову линију помоћу ЦСС -а. Овде ћемо вам показати како да обмотате дугачке, непрекинуте текстове помоћу ЦСС -а.



Како функционише ЦСС прелом текста

ЦСС рукује растегнутим дугим речима помоћу уграђеног прелом редова или прелити-омотати својство.



како прилагодити снапцхат филтер

Међутим, када нису контролисани, прегледачи подразумевано обрађују тако дугачке текстове. Неће превртати дугачке речи док не добију упутство да то учине.

Повезано: Шта треба да знате о ДОМ -у



Два главна ЦСС својства поменута раније раде на исти начин и можете их користити наизменично. Међутим, прихватају четири вредности или синтаксе:

  • преломна реч : Ово је стварна ЦСС синтакса која говори прегледачу да пребаци дугачак текст у нови ред.
  • нормално : Преломи сваку реч на нормалним тачкама раздвајања унутар ДОМ -а. Нема ефекта на дугачке жице.
  • почетни : То је подразумевани начин претраживања за руковање низовима. Као нормално синтакса, не ломи дугачке речи.
  • наследити : Каже елементу -детету да наследи својство својих родитеља. Али још увек не функционише са дугим текстовима, осим ако се пријавите преломна реч родитељском елементу.

Како преломити дугачке речи помоћу ЦСС прелома речи

Пребацивање речи у нову линију помоћу ЦСС -а је једноставно и не захтева гломазна ЦСС подешавања за рад.



На пример, дуго х2 текст у текстуалном контејнеру на слици испод прелази граничну линију:

Хајде да видимо како то можемо пребацити у следећи ред помоћу прелом редова ЦСС својство:



ХТМЛ :


This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

ЦСС :

.wrap-it{
word-wrap: break-word;
}

Након омотавања дугог х2 текст на узорку слике, ево резултата:

То је то! Сада знате како да пребаците речи у нову линију вашег ДОМ -а помоћу ЦСС -а.

како да ажурирам коди на мојој ватри

Повезано: Како циљати део веб странице помоћу ЦСС бирача

Међутим, као што је раније речено, прелом редова и прелити-омотати раде на исти начин и прихватају слична својства.

Користити прелити-омотати уместо тога, само замените прелом редова с тим.

Важно је омотати речи на веб страници

Осим што додаје више естетике вашој веб страници, паковање текстова компактира ДОМ. Чак и ако контролишете шта улази у одељак са садржајем, корисници могу постављати везе или друге речи које се не уклапају у ваш текстуални контејнер или цео ваш ДОМ.

Стога је примјена прелома текста на такав одјељак неопходна да би ДОМ остао нетакнут.

бесплатни пптп впн клијент за Мац
Објави Објави Твеет Емаил Како користити медијске упите у ХТМЛ -у и ЦСС -у за креирање респонзивних веб страница

Желите да ваша веб локација изгледа невероватно на мобилним уређајима? Време је да научите како да користите медијске упите у ЦСС -у.

Прочитајте следеће Повезане теме
  • Програмирање
  • ЦСС
  • Модел објекта документа
О аутору Идисоу Омисола(94 објављена чланка)

Идову је страствен у било чему паметном технологији и продуктивности. У слободно време игра се кодирањем и прелази на шаховску таблу кад му је досадно, али такође воли да се повремено одваја од рутине. Његова страст да људима покаже пут око савремене технологије мотивише га да пише више.

Више од Идову Омисола

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили