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

Kapcsolódó bejegyzések:
  • Egy új SEO extension (plugin) jött ki Chrome alá, amire azt kell mondjam hogy nagyon jó, talán a legjobb amit eddig láttam.A képek önmagukért beszélnek, a vi …

  • Sziasztok ! Jelentkezem egy újabb Photoshop tutorial-al ! Most egy Abstract csillagot fogunk készíteni :) ! Nos lássuk !1) Csinálj egy 400X400 pixeles ké …

  • A Smashing Magazine-ra került ki minap Oliver Twardowski által készített 75 darabos ikon készlet, melyekhez – és ez elég ritka – a PSD forrásfájlokat is biztosít …

  • Nem bírom ki, hogy megint ne ajánljak egy újabb nagyon jó kis ikongyűjteményt Nektek :)[caption id=”attachment_5421″ align=”alignnone” width=”598″ captio …

  • A következő bejegyzésben egy idegen honlap egyik bejegyzésére hívnám a a figyelmed. A jövőben sem tervezem, hogy minden egyes érdekesebb angol nyelvű tartalomra …

A cikket beküldte: Harder (http://blog.harder.hu)

4 hozzászólás

  1. Bence says:

    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. Bence says:

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

  3. ez hasznos volt, köszi!

  4. Lala says:

    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 :)

Szólj hozzá
a Hosszú linkek és szövegek megtörése c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>