Hosszú linkek és szövegek megtörése

A Perishable Press oldalon találtam egy nagyon jó megoldást arra, hogy lehet a PRE (illetve bármilyen blokk szintű elem esetében) megtörni a hosszú szövegeket. A különböző böngészőknek különböző white-space értékeket kell adni, de szerencsére ezek „listaszerűen” felsorolhatóak a CSS-ben:

Így néz ki default-ban a hosszú szöveg, sortörés nélkül

Alapértelmezett wrap - sortörés nélkül
Alapértelmezett wrap - sortörés nélkül

és az alábbi kód használatával:

1
2
3
4
5
6
7
8
9
10
pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

Ezt az eredményt kapjuk:

Sortörés után
Sortörés után

Itt tekinthető meg a demo oldal.

Forrás: Wrapping Long URLs and Text Content with CSS • Perishable Press

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

4 HOZZÁSZÓLÁS

  1. Hú, ennyi kód kell a böngészőkhöz? Durva :S. Még jó, hogy ilyen problémám eddig nem volt. :D

  2. Bár, azt hiszem, lesz majd. Jó, hogy van ez a tutorial. :-)
    És bocs a dupla kommentért.

  3. Ez most nagyon jól jött, köszönöm a hasznos ötletet! És a többit is, amit erről az oldalról kaptam.

    És az is jó, hogy így egy év után is emlékeztem, hogy hol láttam :)

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét