Como pode um texto como o aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
que excede a largura de um div
(digamos200px
) pode ser quebrado?
Estou aberto a qualquer tipo de solução, como CSS, jQuery, etc.
Como pode um texto como o aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
que excede a largura de um div
(digamos200px
) pode ser quebrado?
Estou aberto a qualquer tipo de solução, como CSS, jQuery, etc.
Respostas:
Tente o seguinte:
div {
width: 200px;
word-wrap: break-word;
}
word-break: break-all;
o texto normal, ele quebra as palavras no meio, o que é feio ... Não podemos ter uma mistura dos dois comportamentos?
word-break: break-all
e não word-wrap: break-all
. Erro fácil de cometer #
No bootstrap 3, verifique se o espaço em branco não está definido como 'nowrap'.
div {
width: 200px;
word-break: break-all;
white-space: normal;
}
white-space: normal;
também precisava antes que funcionasse.
Você pode usar um hífen suave da seguinte maneira:
aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa
Isso aparecerá como
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
se a caixa de contenção não for grande o suficiente ou
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
se for
­
?
aaaaaa...aaaaa
em a­a­a­a­a­a­a...a­a­a­a
?
div {
// set a width
word-wrap: break-word
}
O 'word-wrap
solução ' funciona apenas no IE e navegadores compatíveisCSS3
.
A melhor solução entre navegadores é usar a linguagem do lado do servidor (php ou o que for) para localizar seqüências longas e colocar dentro delas em intervalos regulares a entidade html ​
Essa entidade quebra bem as palavras longas e funciona em todos os navegadores.
por exemplo
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
O único que funciona no IE, Firefox, chrome, safari e opera se não houver espaços na palavra (como uma URL longa) é:
div{
width: 200px;
word-break: break-all;
}
Eu achei isso à prova de balas.
Outra opção também está usando:
div
{
white-space: pre-line;
}
Isso definirá todos os seus elementos div em todos os navegadores que suportam CSS1 (que é praticamente todos os navegadores comuns desde o IE 8)
<pre>
elemento que deseja incluir quebra de linha, isso funciona word-break
ou word-wrap
não.
.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+ */
}
Adicione este CSS ao parágrafo.
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 do próximo cara, mas não é uma resposta correta para esta pergunta. Ele está procurando por quebra de linha, não truncar o excesso.
Exemplo de truques 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;
}
Mais exemplos aqui .
Uma solução do lado do servidor que funciona para mim é: $message = wordwrap($message, 50, "<br>", true);
onde $message
está uma variável de string que contém a palavra / caracteres a serem divididos. 50 é o comprimento máximo de qualquer segmento e "<br>"
é o texto que você deseja inserir a cada (50) caracteres.
Tente isto
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;
}
a propriedade overflow de texto: reticências add ... e line-clamp mostram o número de linhas.
No corpo HTML, tente:
<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>
No corpo do CSS, tente:
background-size: auto;
table-layout: fixed;
Tente isto
div {display: inline;}
Eu usei o bootstrap. Meu código html parece ..
<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, para que você possa usá-lo em vez de.wrap-text
você pode usar esse CSS
p {
width: min-content;
min-width: 100%;
}
experimentar:
overflow-wrap: break-word;