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 [és az alábbi kód használatával:
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: ](https://www.tutorial.hu/kepek/2010/06/default-wrap.gif)Itt tekinthető meg a demo oldal. Forrás: Wrapping Long URLs and Text Content with CSS • Perishable Press
Harder
Profil
Korábbi hozzászólások (4)
A régi blogon érkezett hozzászólások archívuma. Új hozzászólást már nem lehet írni.
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
Bár, azt hiszem, lesz majd. Jó, hogy van ez a tutorial. :-)
És bocs a dupla kommentért.
ez hasznos volt, köszi!
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 :)
Van hozzáfűznivalód? Írj nekem közvetlenül.
Kapcsolat