CSS: forzare il ritorno a capo in assenza di caratteri di spaziatura
Lunedì 22 Agosto 2011 - 10:00
di Mariano Calandra
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>
Commenti
1
moooooooooooooooooooooooolto utileeeeeeeeeeeeeeeee, davvero!
# - postato da Jun - 22 Agosto 2011 - 10:38
2
Questa proprietà funziona con tutti i browser?
3
Ma soprattutto le FAQ dei CSS non sono in un altro sito?
M.
# - postato da Marco Grazia - 22 Agosto 2011 - 11:37
4
@Mattia
Così pare :)
5
word-wrap è cross-browser:
http://caniuse.com/#search=wor.....d-wrapIn alcuni moderni browser (in alcuni casi previo impiego dei vendor prefixes), si può iniziare a “sperimentare” anche la sillabazione:
http://www.w3.org/TR/2007/WD-c.....yphenation
6
@Mattia: https://developer.mozilla.org/en/css/word-wrap#Browser_compatibility
# - postato da Cesar - 22 Agosto 2011 - 12:29
7
Grazie Cesar! Quindi non devo preoccuparmi di utilizzarlo.
8
Grazie! Ottimo suggerimento :-)
# - postato da Enrico - 23 Agosto 2011 - 15:40
9
Estremamente utile specie per quei layout dove si hanno box molto piccoli
# - postato da Roberto Di Vito - 23 Agosto 2011 - 16:25
10
Occhio che è una proprietà CSS3, quindi per la validazione dovete specificare il profile css3 nel validatore. Un altro sistema per ottenere lo stesso effetto è usare
white-space: pre-line(CSS 2.1). Io in genere li combino insieme. :-)# - postato da Gabriele Romanato - 24 Agosto 2011 - 18:53
11
E’ bene anche segnalare che vengono mandate a capo parole lunghe, non permette ad esempio di ottenere una sorta di “sillabazione”.