.klass {
white-space: -moz-pre-wrap !important; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation)
http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
Kui on soov sundida Mozillat ka pikki sõnu poolitama, siis on keerukam lahendus kirjedatud siin:
IE6 ning PNG AlphaImageLoader
IE6 ei näita poolläbipaistvaid PNG pilte vaikimisi õigesti. Ning 50% IE kasutajatest kasutab veel IE6-t.
Et IE6-s näidata poolläbipaistvaid PNG pilte, tuleks kasutada järgnevat võtet:
Juhin veel tähelepanu, et olen seda kasutanud DIV tagidel. SPAN tagidel proovisin, aga ei andnud tulemust. Muid tage ei proovinud.
Kuid selle filtri rakendamisel enam ei tööta selles piirkonnas pildi mitteläbipaistvate alade kohal enam hiire event--id. Selleks puhuks on järgnev täiendus:
Kommenteerin veel, et see "position: relative;" atribuut tuleb panna viimase taseme child elemendile, ehk kui AlphaImageLoaderiga on mingi DIV ning selle sees on mitu taset alam-DIV-e, siis tuleb määrata relatiivse positsiooni atribuut viimasele tasemele. Kui see stiilifailis liiga mahukaks läheks, võib kasutada näiteks sedasi:
.taustagadiv A, .taustagadiv INPUT, .taustagadiv TEXTAREA. { ... } Sellest paistab piisavat, et eventidega objektid oleks kaetud. Võib ka kirjutadata .taustadagiv * { ... }. Aga sel juhul võib browser kokku joosta, kui veidikenegi mahukam leht juhtub.
Kui tahad, et poolitamise korral ilmuks ka poolituskriips, lisa "<wbr>" järele "-" märk: "<wbr>-". Sel juhul see poolituskriips ilmub nähtavale ainult siis, kui sõna poolitatakse, muidu aga mitte.