word wrap e text overflow

La proprietà word-wrap è supportata da tutti i principali browser e accetta i valori "normal" - ovvero il valore di default- e il valore "break-word".
Essa è indicata per mandare a capo il testo quando una parola troppo lunga può andare oltre la larghezza dell'elemento che la contiene.
Nell'esempio sottostante, il testo viene mandato a capo arbitrariamente senza nè andare oltre nè modificare la larghezza del contenitore.



CODICE:
< style >
div.tornaACapo{border:3px solid rgb(200,200,180);
width:300px;
word-wrap:break-word;
}
< / style >

LoremipsedixitsitamnerreopdrodmclaieroooLoremipsedixitsitamnerreopdrodmclaieroooLoremipsedixitsitamnerreopdrodmclaierooo

Un'altra possibilità è data dalla proprità "text-overflow", usata per inserire i puntini di sospensione e spezzare il testo non appena esso raggiunge la larghezza massima data al div, al quale occorre settare la proprietà overflow su "hidden"



CODICE:
< style >
div.ellipsis{border:3px solid rgb(200,200,180);
width:300px;
overflow:hidden;
white-space:nowrap;
-ms-text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
text-overflow:ellipsis;
}
< / style >

LoremipsedixitsitamnerreopdrodmclaieroooLoremipsedixitsitamnerreopdrodmclaieroooLoremipsedixitsitamnerreopdrodmclaierooo