Quebra de palavras do Firefox quebra palavras curtas em pontos aleatórios
Eu estoubreak-word
um recipiente para que as palavras extremamente longas não transbordem. Embora o Chrome e o Safari lidem com isso muito bem, parece que o Firefox e o IE gostam de quebrar palavras aleatoriamente - até mesmo palavras curtas, nos pontos mais ridículos. Veja as imagens abaixo:
Aqui está o código que estou usando para evitar quebrar as palavras:
.break-word {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Este é o CSS que estou usando para o container e o texto:
.wrap {
position: relative;
text-align: center;
margin: 40px auto 20px;
padding: 50px;
border: 4px double #f7f7f7;
display: block;
}
.quote-text {
font-size: 40px;
line-height: 50px;
font-weight: 400;
}
HTML
<div class="wrap break-word">
<div class="row-fluid quotation-marks">“”</div>
<span class="quote-text">
Having a partner definitely allows you to take more risks.
</span>
<span class="author">Arianna Huffington</span>
</div>
Por que isso está acontecendo? Alguma pista de como eu consegui que as palavras quebrassem normalmente em todos os navegadores? O Firefox é definitivamente uma prioridade.
Desde já, obrigado!