4

Quero uma função que adicione a tag <br> quando o texto não tenha espaçamentos, eu fiz um Fiddle com o problema: https://jsfiddle.net/sc290ssn/. Essa função pode ser feita em JavaScript ou PHP.

<div class="post">
    <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
</div>
<h3>Queria uma função que deixe o texto acima igual ao texto abaixo.</h3>
<div class="post">
    <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk<br>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
</div>
3
  • Nesse caso ele não possui espaço e mesmo assim adiciona o <br>, você precisa quebrar quando chegar em determinada quantidade ? Commented 29/10/2015 às 19:15
  • O objetivo é mesmo adicionar a tag <br> ou apenas "quebrar" a palavra para a linha seguinte?
    – Chun
    Commented 29/10/2015 às 19:18
  • Olá Jonas, bem vindo ao Stack Overflow em Português. Percebi que teve várias perguntas fechadas recentemente. Recomendo que leia o guia Como perguntar para aumentar suas chances de conseguir uma boa resposta.
    – Math
    Commented 26/11/2015 às 17:56

3 Respostas 3

11

Eu particularmente não utilizaria js ou php para fazer isso, você poderia resolver a quebra de linha apenas usando word-wrap:break-word do css, assim:

.post {
  background-color: #FFF;
  border: 1px solid #e1e8ed;
  padding: 15px;
  border-radius: 6px;
  word-wrap: break-word;
}
<div class="post">
  <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
</div>

Veja a compatibilidade: Can I use?

4
  • 2
    Exatamente, era isso que eu estava para dizer :)
    – Chun
    Commented 29/10/2015 às 19:31
  • perfeito, obrigado. Commented 29/10/2015 às 21:36
  • demais mesmo... Commented 8/11/2015 às 19:58
  • nunca tinha visto essa propriedade no css Commented 8/11/2015 às 19:59
2

Uma coisa assim?

$(function() {
   var total = $('.post p:first').html().length;
    var line_brk = (total < 69) ? 69 : (total / 2);
    var el = $('.post p:first');
    var data = el.html();
    var t = '';
    for(var i in data) {
         t += data[i];
        if(i == line_brk) {
           t +='<br>';
        }
    }
    el.html(t);
});
2

Você pode obter o conteúdo do elemento <p>, e a partir dele "quebrar" o texto baseado na sua lógica. Por exemplo, o código abaixo adiciona o <br> quando o texto é maior que um certo tamanho, mas você pode mudar a condição para quando o texto não tem espaços. Note que o código pode ser simplificado (bastante) com bibliotecas tais como jQuery, mas a idéia é a mesma.

var postDiv = document.getElementsByClassName("post")[0];
var pElem = null;
for (var i = 0; i < postDiv.childNodes.length; i++) {
    var child = postDiv.childNodes[i];
    if (child.nodeType === document.ELEMENT_NODE && child.localName === "p") {
        pElem = child;
        break;
    }
}
var textSizeLimit = 69;
var pText = pElem.innerText;
if (pText.length > textSizeLimit) {
    while (pElem.hasChildNodes()) {
        pElem.removeChild(pElem.firstChild);
    }

    do {
        var lineText = pText.substring(0, textSizeLimit);
        pElem.appendChild(document.createTextNode(lineText));

        pText = pText.substring(textSizeLimit);
        if (pText.length > 0) {
            pElem.appendChild(document.createElement("br"));
        }
    } while (pText.length > 0);
}
2
  • poderia editar para usar em toda div com a class post? Commented 29/10/2015 às 19:34
  • Sim, em vez de pegar o primeiro elemento (`getElementsByClassName("post")[0]), você pode pegar todos os elementos e iterar sobre eles. Commented 29/10/2015 às 20:10

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .