Home-theater-designers
Pitkät tekstit voivat vaikuttaa hallitsemattomilta web -suunnittelun aikana. Mutta ne voivat olla myös väistämättömiä, ja joskus ne ylittävät rajat. Tämä voi luoda löysän asiakirjaobjektimallin (DOM), jossa on tarpeeton ylivuoto, joka ei ole käyttäjäystävällinen.
Mutta tässä on hyvä uutinen: voit käsitellä niin pitkiä tekstejä käärimällä ne uudelle riville CSS: n avulla. Tässä näytämme sinulle, kuinka kääriä pitkät, katkeamattomat tekstit CSS: llä.
Kuinka CSS -tekstikääre toimii
CSS käsittelee venytetyt pitkät sanat sisäänrakennetun avulla rivitys tai ylivuoto-kääre omaisuutta.
hiiren rulla vierittää ylöspäin, kun vierität alas
Kuitenkin, kun selaimet eivät ole hallittavissa, ne käsittelevät oletusarvoisesti niin pitkiä tekstejä. He eivät kääri pitkiä sanoja, ennen kuin he ovat saaneet ohjeet tehdä niin.
Aiheeseen liittyviä: Mitä sinun tarvitsee tietää DOM: stä
Kaksi aiemmin mainittua CSS -ominaisuutta toimivat samalla tavalla ja voit käyttää niitä keskenään. Ne hyväksyvät kuitenkin neljä arvoa tai syntaksia:
- murto-sana : Tämä on todellinen CSS -syntaksi, joka kehottaa selainta käärittämään pitkän tekstin uudelle riville.
- normaali : Se rikkoo jokaisen sanan normaalissa erotuskohdassa DOM: n sisällä. Ei vaikuta pitkiin ketjuihin.
- alkukirjain : Se on selaimen oletus tapa käsitellä merkkijonoja. Kuin normaali syntaksi, se ei katkaise pitkiä sanoja.
- periä : Se käskee alaelementin perimään vanhempansa omaisuuden. Mutta se ei silti toimi pitkillä teksteillä, paitsi sinä haet murto-sana pääelementille.
Kuinka kääriä pitkiä sanoja CSS Word Wrapilla
Sanojen kääriminen uudelle riville CSS: n avulla on helppoa eikä vaadi hankalia CSS -säätöjä toimiakseen.
Esimerkiksi pitkä h2 alla olevan esimerkkikuvan tekstisäiliössä oleva teksti ylittää rajaviivan:
Katsotaanpa, kuinka voimme kääriä sen seuraavalle riville käyttämällä rivitys CSS -ominaisuus:
HTML :
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
CSS :
.wrap-it{
word-wrap: break-word;
}
Käärimisen jälkeen pitkä h2 esimerkkikuvan teksti, tässä on tulos:
Se siitä! Tiedät nyt, miten voit kääriä sanat uudelle riville DOM: in sisällä CSS: n avulla.
kuinka ladata video Internetistä
Aiheeseen liittyviä: Kuinka kohdistaa osa verkkosivusta CSS -valitsimien avulla
Kuitenkin, kuten aiemmin todettiin, rivitys ja ylivuoto-kääre toimivat samalla tavalla ja hyväksyvät samanlaiset ominaisuudet.
Käyttää ylivuoto-kääre sen sijaan vain vaihtaa rivitys sen kanssa.
On tärkeää kääriä sanat verkkosivulle
Sen lisäksi, että verkkosivullesi lisätään estetiikkaa, tekstin kääriminen tiivistää DOM: n. Vaikka hallitsisit sisältöosi liittyviä asioita, käyttäjät voivat lähettää linkkejä tai muita sanoja, jotka eivät sovi tekstisäiliöön tai koko DOM -tiedostoosi.
Siksi tekstin rivityksen käyttäminen tällaisessa osassa on välttämätöntä, jotta DOM säilyy ehjänä.
tehtäväpalkki ei toimi Windows 10: ssäJaa Jaa Tweet Sähköposti Mediakyselyiden käyttäminen HTML- ja CSS -tiedostoissa reagoivien verkkosivustojen luomiseen
Haluatko saada sivustosi näyttämään upealta mobiililaitteilla? On aika oppia käyttämään mediakyselyitä CSS: ssä.
Lue seuraava Liittyvät aiheet- Ohjelmointi
- CSS
- Asiakirjan objektimalli
Idowu on intohimoinen kaikkeen älykkääseen tekniikkaan ja tuottavuuteen. Vapaa -ajallaan hän leikkii koodauksella ja vaihtaa shakkilaudalle, kun on kyllästynyt, mutta hän myös rakastaa irtautumista rutiinista silloin tällöin. Hänen intohimonsa näyttää ihmisille tie modernin tekniikan ympärillä motivoi häntä kirjoittamaan enemmän.
Lisää Idowu Omisolastatilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi