Come può un testo simile a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
superare la larghezza di un div
(diciamo200px
avvolgere )?
Sono aperto a qualsiasi tipo di soluzione come CSS, jQuery, ecc.
Come può un testo simile a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
superare la larghezza di un div
(diciamo200px
avvolgere )?
Sono aperto a qualsiasi tipo di soluzione come CSS, jQuery, ecc.
Risposte:
Prova questo:
div {
width: 200px;
word-wrap: break-word;
}
word-break: break-all;
quindi nel testo normale si spezzano le parole nel mezzo, il che è brutto ... Non possiamo avere un mix di entrambi i comportamenti?
word-break: break-all
e non word-wrap: break-all
. Facile errore da fare
Su bootstrap 3, assicurati che lo spazio bianco non sia impostato come "nowrap".
div {
width: 200px;
word-break: break-all;
white-space: normal;
}
white-space: normal;
anche prima che funzionasse.
È possibile utilizzare un trattino morbido in questo modo:
aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa
Questo apparirà come
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
se la scatola contenente non è abbastanza grande, o come
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
se è.
­
?
aaaaaa...aaaaa
in a­a­a­a­a­a­a...a­a­a­a
?
div {
// set a width
word-wrap: break-word
}
La ' word-wrap
' soluzione funziona solo con IE e con i browser supportati CSS3
.
La migliore soluzione cross browser è quella di utilizzare il linguaggio lato server (php o altro) per individuare stringhe lunghe e posizionarle al loro interno a intervalli regolari l'entità html ​
Questa entità spezza bene le parole lunghe e funziona su tutti i browser.
per esempio
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
L'unico che funziona su IE, Firefox, Chrome, Safari e Opera se non ci sono spazi nella parola (come un lungo URL) è:
div{
width: 200px;
word-break: break-all;
}
Ho trovato questo a prova di proiettile.
Un'altra opzione sta anche usando:
div
{
white-space: pre-line;
}
Questo imposterà tutti i tuoi elementi div in tutti i browser che supportano CSS1 (che è praticamente tutti i browser più comuni fino a IE 8)
<pre>
elemento che si desidera disporre del ritorno a capo automatico, questo funziona word-break
o word-wrap
meno.
.wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Aggiungi questo CSS al paragrafo.
style="width:420px;
min-height:15px;
height:auto!important;
color:#666; padding: 1%;
font-size: 14px;
font-weight: normal;
word-wrap: break-word;
text-align: left"
text-overflow:ellipsis
tanto quanto il prossimo, ma non è una risposta corretta a questa domanda. Sta cercando di racchiudere la parola, non troncare lo straripamento.
Esempio dai trucchi CSS :
div {
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Altri esempi qui .
Una soluzione lato server che funziona per me è: $message = wordwrap($message, 50, "<br>", true);
dove si $message
trova una variabile stringa contenente la parola / i caratteri da suddividere. 50 è la lunghezza massima di un determinato segmento ed "<br>"
è il testo che si desidera inserire ogni (50) caratteri.
Prova questo
div{
display: block;
display: -webkit-box;
height: 20px;
margin: 3px auto;
font-size: 14px;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
la proprietà overflow del testo: i puntini di sospensione aggiungono ... e il line-clamp mostra il numero di righe.
Nel corpo HTML prova:
<table>
<tr>
<td>
<div style="word-wrap: break-word; width: 800px">
Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
</div>
</td>
</tr>
</table>
Nel corpo CSS prova:
background-size: auto;
table-layout: fixed;
Prova questo
div {display: inline;}
Ho usato bootstrap. Il mio codice HTML sembra ..
<div class="container mt-3" style="width: 100%;">
<div class="row">
<div class="col-sm-12 wrap-text">
<h6>
text content
</h6>
</div>
</div>
</div>
CSS
.wrap-text {
text-align:justify;
}
text-justify
classe, quindi puoi usarlo al posto di.wrap-text
puoi usare questo CSS
p {
width: min-content;
min-width: 100%;
}
provare:
overflow-wrap: break-word;
Utilizzare l' word-wrap:break-word
attributo insieme alla larghezza richiesta. Principalmente, inserisci
la larghezza in pixel, non in percentuale.
width: 200px;
word-wrap: break-word;