Espaço quebrável sem colapso, mas ainda (linha) em HTML?

Question

O que posso usar no HTML se quiser ter um espaço em branco no meio da linha que parece três espaços, mas ainda pode ser quebrado se a linha ficar muito longa?

O espaço em branco regular é colapso (uma série de espaços parece a mesma que um único espaço) e, no espaço sem quebra (), a linha não pode ser quebrada.

Atualizar: Eu acho que o que eu realmente quero é uma tag ＜ pré -＞ que ainda pode quebrar longas filas (eu preciso exibir o código -fonte).

Answer 1

Que tal um ou mais em espaços ()? É verdade que isso dependeria do tamanho da fonte do usuário. Se isso realmente não funcionar no seu design, considere um espaço ().

Você também pode querer olhar para Esta tabela de vários espaços na Wikipedia.

Answer 2

Na verdade, tenho a resposta exata que você está procurando. Eu procurei em todos os lugares esta resposta e nada sugeriu que funcionassem perfeitamente. Então, pensei em uma solução e tentei e fiquei chocado por funcionar sem falha!

Garrow estava realmente certo (ele simplesmente não explicou ou aceitou o tempo todo). A solução é em vez de colocar   sozinho, coloque &nbsp;<wbr>. Basta fazer uma pesquisa simples e substituir e adicionar o <wbr> tag depois de cada  . Funciona perfeitamente!

o <wbr> A tag é uma tag pouco conhecida suportada em todos os principais navegadores que diz ao navegador para colocar uma nova linha aqui apenas se for necessária.

ATUALIZAÇÃO: Encontrei um navegador que isso não funciona exatamente exatamente - ou seja, 8! Eles realmente tiraram o <wbr> marcação! Eu resolvi esse problema criando uma classe que diz:

.wbr:before { content: "\200B" }

e em vez de substituir   com &nbsp;<wbr>, substitua -o pelo seguinte:

&nbsp;<wbr><span class='wbr'></span>

No PHP, isso seria:

$text = str_replace(" ","&nbsp;<wbr><span class='wbr'></span>", $text);

Não se esqueça de adicionar a classe também.

Obviamente, isso está ficando um pouco excessivo, substituindo um único espaço por tudo isso, mas funciona da mesma forma que desejado e, como nunca vi a marcação, funcionou para mim.

Se isso é muito confuso, outra solução é trocar espaços duplos por um   seguido por um espaço normal. Isso vai alternar   e espaços normais e funciona em meus testes.

No PHP, isso seria:

$text = str_replace("  ","  ", $text);

Espero que isto ajude! Eu coloquei pesquisas suficientes sobre isso; Eu pensei que deveria transmitir.

Answer 3

Não funcionam um espaço entre dois espaços que não quebram?

Answer 4

Que tal u003Cwbr>?

Answer 5

Se vocês são não segmentando ie (exceto 8, modo de padrões):

<span style="white-space: pre-wrap">   </span>

Para IE, <span style="width:3ex"></span> Funciona no modo Quirks, então mescle e ...

<span style="width:3ex;white-space:pre-wrap">   </span>

O que parece funcionar em todos os lugares que eu tentei ... exceto os padrões do IE7. D'HO!

Answer 6

Que tal dois  é seguido por um espaço regular? A única desvantagem disso (até onde eu sei) é que, se uma quebra de linha cair naturalmente no espaço regular, você terá um pouco de espaço à direita na linha anterior devido aos espaços que não são de quebra, mas eu não Acho que isso faria diferença na aparência real da página.

Answer 7

Pode ser melhor dar um passo atrás e perguntar o que você está tentando renderizar. O que esse espaço extra em largura significa?

Answer 8

Dá 100px para o espaço esquerdo entre seus espaços de texto exemplo

span style = "margem-esquerda: 100px;"

(n_n)