CSS: forzare il ritorno a capo in assenza di caratteri di spaziatura

Siamo d'accordo: "l'abito non fa il monaco", ma, a parità  di contenuti, un sito esteticamente gradevole invoglia alla permanenza molto più di uno "brutto". I blog, usati come portfolio o "sponsor personale" sono quelli esteticamente più curati, sarebbe spiacevole se l'intero layout venisse rovinato da un link troppo lungo oppure da un "oh, nooooooooooooooooooo" tra i commenti in grado di scompaginare il nostro layout.

Scriviamo le proprietà  CSS del box che dovrà  contenere i commenti degli utenti:

div {
    background: #ededed;
    font: bold 0.8em/100% Arial, Helvetica, sans-serif;
    border: solid 1px #ccc;
    padding: 15px;
    width: 150px;
    margin: 25px;
}

e successivamente creiamo il box vero e proprio:

<div>
    <p>Oh, noooooooooooooooooooooooooooooooooooooooooo</p>
</div>

Il risultato è visibile a tutti, le "o" di troppo superano il box creato per contenere i commenti e nel peggiore dei casi potrebbero causare lo spostamento degli altri blocchi (se presenti). Molto più elegante il secondo scenario, dove grazio all'uso del break-word forzeremo il ritorno a capo.

La modifica da fare è davvero semplice, basta creare una nuova regola, in cui imposteremo la proprietà  word-wrap su break-word.

.break-word {
    word-wrap: break-word;
}

Fatto cià dovremo solo aggiungere la proprietà  di classe al nostro div:

<div class="break-word">
    <p>Oh, noooooooooooooooooooooooooooooooooooooooooo</p>
</div>