logo

Как да обвивам текст в CSS?

CSS пренасяне на думи свойството се използва за прекъсване на дългите думи и преминаване към следващия ред. Това свойство се използва за предотвратяване на препълване, когато неразбиваем низ е твърде дълъг, за да се побере в съдържащото поле.

Това свойство дефинира прекъсванията в думата, за да се избегне препълването, когато дадена дума е твърде дълга, за да се побере в контейнера. Той определя прекъсването на думите, когато съдържанието надхвърли границата на контейнера.

Синтаксис

 word-wrap: normal | break-word | initial l inherit ; 

Стойности

нормално: Това е стойността по подразбиране, която се използва за прекъсване на думи само при разрешени точки на прекъсване.

ако иначе баш

прекъсваща дума: Използва се за разбиване на несломимите думи.

първоначално: Използва се за задаване на стойността на свойството по подразбиране.

наследявам: Той наследява свойството от своя родителски елемент.

Пример

 .test { width: 200px; background-color: lightblue; border: 2px solid black; padding: 10px; font-size: 20px; } .test1 { width: 11em; background-color: lightblue; border: 2px solid black; padding: 10px; word-wrap: break-word; font-size: 20px; } <p> In this paragraph, there is a very long word: iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p> 
Тествайте сега

Изход

Как да обвивам текст в CSS