Skip css line keyframes

Question

I’m in a tremendous difficulty, I made a small freshness for when entering the site the text shows the same when typing alone with keyframe.

Doubt: How can I skip line in my text without the keyframe reading too, for example "
", i.e., the text would come out like this: "my text 'br>my text |" all together and with the tag br.

function typeWrite(elemento){
    const textoArray = elemento.innerHTML.split('');
    elemento.innerHTML = ' ';
    textoArray.forEach(function(letra, i){   
      
    setTimeout(function(){
        elemento.innerHTML += letra;
    }, 75 * i)

  });
}
const titulo = document.querySelector('.titulo-principal');
typeWrite(titulo);

.titulo-principal{
}
.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}

<p class="titulo-principal">Meu texto br> Meu Texto</p>

Answer 1

Or you can replace the <br> for \n and change the innerText instead of innerHtml. So you do not need to restrict by size and can take advantage to apply the effect elsewhere and with more line breaks.

function typeWrite(elemento){
    let texto = elemento.innerHTML.replace('<br>', '\n');
    let textoArray = texto.split('');
    elemento.innerHTML = ' ';
    textoArray.forEach(function(letra, i){   
      
    setTimeout(function(){
        elemento.innerText += letra;
    }, 75 * i)

  });
}
const titulo = document.querySelector('.titulo-principal');
typeWrite(titulo);

.titulo-principal{
}
.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}

<p class="titulo-principal">Meu texto <br> Meu Texto</p>

Answer 2

Cara vc can simply limit the width of the <p> in 10ch (ch is a measure equivalent to the character 0, that is to say, 10ch has a width of ten characters 0, guy 0000000000)

With this you break the line exactly after 10 characters, which is where you put the <br>. I know it is not dynamic and so precise, but in this case it works. For you to "ignore" this <br> in the middle of the text I think only with regex, but that’s not my specialty...

function typeWrite(elemento) {
  const textoArray = elemento.innerHTML.split('');
  elemento.innerHTML = ' ';
  textoArray.forEach(function(letra, i) {

    setTimeout(function() {
      elemento.innerHTML += letra;
    }, 75 * i)

  });
}
const titulo = document.querySelector('.titulo-principal');
typeWrite(titulo);

.titulo-principal {
  width: 10ch;
}

.titulo-principal:after {
  content: '|';
  margin-left: 5px;
  opacity: 1;
  animation: pisca .7s infinite;
}

@keyframes pisca {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

<p class="titulo-principal">Meu texto Meu Texto</p>

Answer 3

Just complementing the answers already existing here, I advise to use regex, pq this way can better manipulate the text, for example, if you need to have more than one tag <br> within the same paragraph, tbm can take advantage to see the differences between innerHTML and innerText :

const titulo = document.querySelector('.titulo-principal');

function typeWrite(elemento) {
  const textos = elemento.innerText;
  const regex = /<br>/g;                           // todas tags <br> no texto
  const texto = textos.replace(regex, '\n')        // substitui os br's por \n
  const textoArray = texto.split('');
  elemento.innerText = ' ';
  
  textoArray.forEach(function(letra, i) {
    setTimeout(function() {
      elemento.innerText += letra;
    }, 75 * i)

  });
}

typeWrite(titulo);

.titulo-principal:after {
  content: '|';
  margin-left: 5px;
  opacity: 1;
  animation: pisca .7s infinite;
}

@keyframes pisca {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

<p class="titulo-principal">Meu texto certo <br> Meu Texto mais um <br> Testando Javascript</p>