Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Tags de texto <p> e <pre>

Estou fazendo uns testes com visualização de texto e notei umas questões:

Exemplo:

O seguinte texto: "001<10 espaços>002<10 espaços>3", Inscrito para a tag <p> e <pre> exibem os seguintes valores:

<p>

001 002 3

<pre>

001          002          3

Primeiro não consigo configurar quebra de linha na tag pre, e segundo não consigo que a tag p (que funciona a tag que quebrar linha) me exiba o campo com os espaços.

Existe uma configuração do CSS ou alguma Tag de texto que eu exiba os espaços e também consiga quebrar o texto?

Exemplo:

001          002
          3
3 respostas

Olá, Estenio.

Já precisei fazer isso um bom tempo atrás da minha vida :-)

Pra que o p tenho o mesmo comportamento dos espaços é só você colocar a propriedade CSS white-space com o valor de pre na sua tag <p>.

Exemplo HTML:

<p>dflahk a     ajdkhfl kajd a     akdjhf kadj   ak djah</p>

Exemplo CSS:

p {
    white-space: pre;
}
solução!

Teoricamente era pra tag <pre></pre> atender a sua necessidade.

Existe a propriedade white-space no css. Documentacao.

white-space: pre; /* Funciona igual a tag pre */
white-space: pre-line; /* Colapsa espacos juntos e mantem a quebra de linha */
white-space: pre-wrap; /* Matem tudo porem o texto será quebrado se o componente nao tiver tamanho o suficiente */

Marco... Hiroshi,,,

Sensacional, muito obrigado, eu estava começando a confundir tudo aqui... encontrei em uma pesquisa a propriedade "white-space: pre" mas estava aplicando na tag <pre>.

Fiz os testes aqui e consegui exatamente o que queria com a propriedade "white-space: pre-wrap;" na tag <p>.

Agradeço a atenção.