Início / coding / Perguntas / 79565086
Accepted
leetbacoon
Asked: 2025-04-10 02:31:26 +0800 CST

evitar espaços finais com HTML bem impresso

  • 772

Estamos testando HTML4.01 (e CSS3) e, com base em nossa experiência anterior em programação, gostamos de imprimir o código-fonte de forma bonita. Exemplo:

<body>
  <p>
    This is a paragraph in this formatted
    document that will render as one
    single line.
  </p>
</body>

O problema que enfrentamos é que as linhas renderizadas têm um espaço em branco no final se </p>não estiverem à direita da última palavra, como no código acima:

Este é um parágrafo neste documento formatado que será renderizado como uma única linha. 

(Destaque o texto e um espaço à direita aparecerá.)

Descobrimos que esse é o caso com <a>as <img>tags e .

Existe alguma opção, sem usar Javascript , que possamos usar para evitar que esses espaços em branco à direita apareçam, além de mover as tags de fechamento (e talvez de abertura) para o início e o fim dos dados reais?

Inicialmente pensamos em uma solução CSS3, mas, pela pesquisa, ela não parece viável dessa forma — todas as pesquisas sobre o assunto não tiveram sucesso.

html

2 respostas

  1. Best Answer

    Vale ressaltar que esse comportamento parece ser exclusivo do Firefox e envolveria apenas o realçador de texto. Meu Chrome e Safari não renderizam o espaço em branco extra e meu Firefox não o inclui no texto copiado.

    De qualquer forma, uma maneira de não ter esse espaço em branco extra no Firefox é colocar um comentário logo após o nó de texto, antes da nova linha:

    <body>
  <p>
    This is a paragraph in this formatted
    document that will render as one
    single line.
  </p>
  <p>
    This is a paragraph in this formatted
    document that will render as one
    single line.<!-- no white space -->
  </p>
  <p>
    This is a paragraph in this formatted
    document that will render as one
    single line.<!---->
  </p>
</body>

    • 2

  2. O HTML interno das tags são dados, então, se você quiser alterar os dados, precisará programar um pouco para conseguir. Eu sei que você não quer fazer isso em Javascript, mas mesmo que não faça o seguinte, é importante entender a ideia. Primeiro, um exemplo em Javascript, depois uma explicação mais geral.

    let items = document.querySelectorAll("a, p");
for (let item of items) {
    console.log(item.innerHTML.length);
    item.innerHTML = item.innerHTML.trim();
    console.log(item.innerHTML.length);
}
    <p> abc </p>
<a> def </a>

    Veja que obtemos o innerHTML, que tem um lengthvalor inicial de 5, mas tem um valor lengthde 3 após o corte. Essa é a lógica que você precisa aplicar. Se você usa C#, PHP, Java, C++, seja lá o que for, pode aplicar a alternativa. Mas a lógica é, de fato, o corte.

    Teria sido ótimo entender por que você não gosta de Javascript, seja por uma aversão pessoal à linguagem, caso em que usar outra linguagem pode ser a solução, ou por outro motivo. No entanto, não é possível automatizar o corte de dados sem que algo execute a automação.

    • 0

relate perguntas