Wbr-tagi

Tagi wbr osoittaa kohdan, jossa selain voi tehdä rivinvaihdon tarvittaessa (jos teksti ei mahdu elementin leveyteen). Tällaisia rivinvaihtoja kutsutaan pehmeiksi.

Ei vaadi suljavatagia.

Kun sanaa siirretään wbr -tagin kautta, siirtomerkkiä "-" ei lisätä. Jos sitä tarvitset - käytä pehmeää siirtomerkkiä ­ (puolipiste lopussa pakollinen, tämä ei ole kirjoitusvirhe).

Pehmeä siirto ­ osoittaa selaimelle kohdan, jossa se voi tehdä rivinvaihdon sanassa (tarvittaessa), asettaen samalla siirtomerkin "-".

Pehmeät siirrot ­ eivät toimi, jos ominaisuus hyphens on asetettu arvoon none (mutta siirrot wbr toimivat).

Esimerkki . Teksti ilman siirtoja

Katsotaanpa näytettä tekstistä, jossa on pitkiä sanoja, jotka ulottuvat lohkon rajojen ulkopuolelle. Annetaan lohkolle pieni leveys niin, että pitkä sana ei mahdu siihen:

html<div id="elem">
  this is supersupersuperlong text
</div>

css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Esimerkki . Wbr-tagi

Täällä, lisätään wbr -tagi paikkoihin, joissa suosittelemme selaimelle tekemään sanan siirron tarvittaessa (huomatkaa, että selain tekee siirrot ei kaikkialla, missä osoitimme):

html<div id="elem">
  this is super<wbr>super<wbr>super<wbr>long text
</div>

css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Esimerkki . ­-merkki

Kokeillaan wbr -tagin sijaan asettaa merkki ­. Siirtokohtiin tulee näkyviin tavuviivoja:

html<div id="elem">
  this is super­super­super­long text
</div>

css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Katso myös