logo

Kuinka rivittää tekstiä CSS:ään?

CSS rivitys ominaisuutta käytetään katkaisemaan pitkät sanat ja rivittämään seuraavalle riville. Tätä ominaisuutta käytetään estämään ylivuoto, kun katkeamaton merkkijono on liian pitkä mahtumaan sisältävään laatikkoon.

Tämä ominaisuus määrittää sanan katkokset, jotta vältetään ylivuoto, kun sana on liian pitkä mahtumaan säilöön. Se määrittää sanojen katkeamisen, kun sisältö ylittää säilön rajan.

Syntaksi

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

Arvot

normaali: Se on oletusarvo, jota käytetään sanojen katkaisemiseen vain sallituissa keskeytyspisteissä.

välisana: Sitä käytetään rikkomaan rikkoutumattomia sanoja.

alkukirjain: Sitä käytetään määrittämään ominaisuuden oletusarvo.

inherit: Se perii ominaisuuden emoelementistään.

Esimerkki

 .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> 
Testaa nyt

Lähtö

Kuinka rivittää tekstiä CSS:ään