Alguns Web Designers já devem ter tido esse problema ao criar qualque tipo de site dinamico (ASP, PHP) onde existam campos para que usuarios postem algum conteudo, pois quando o texto for grande ira quebrar o layout, estou falando de um problema relativamente comum.
Explicando
Quando um texto é digitado sem espaços e sem tags
a página não quebra a linha automaticamente, e se o texto estiver vindo de um banco de dados não à como prever esse erro.
Esse exemplo acima mostra tabelas de mesmo tamanho, porém, quando o texto é digitado sem espaços não quebra a linha e acaba modificando o layout.
Solução
Esta solução que eu trago é para páginas dinamicas, requer conhecimentos em css e em programação ASP ou PHP.
Consiste em inserir um espaço entre cada letra e diminuir via css o letter-spacing entre as letras.
Aqui eu irei utilizar um exemplo com ASP
Aqui se encontra o DIV com o texto dentro
<div style="letter-spacing:1px;"> </div>
Neste caso pode ser um espaço maior varia do tamanho da fonte
Dentro da DIV iremos inserir o codigo ASP que dividira o texto
<%
for j = 1 to len(texto)
texto_novo = mid(texto,j,1)
texto_novo = replace(texto_novo,chr(32)," ")
response.Write texto_novo & " "
next
%>
Explicando o código:
for j = 1 to len(texto) - repete a operação para o numero de letras da string texto
texto_novo = mid(texto,j,1) - captura cada letra individualmente e grava na variavel texto_novo
texto_novo = replace(texto_novo,chr(32)," ") - corrige os espaços (caso tenha algum espaço na string)
response.Write texto_novo & " " - coloca o espaço apos a letra e assim separa todas as letras
next - retorna
Se por acaso as letras se sobreporem configure o letter-spacing no css.
No final seu codigo ficará
<div style="letter-spacing:1px;">
<%
for j = 1 to len(texto)
texto_novo = mid(texto,j,1)
texto_novo = replace(texto_novo,chr(32)," ")
response.Write texto_novo & " "
next
%>
</div>
Qualquer dovida comentem.
Valeu e até a proxima
Adriano Moura
0 comentários:
Postar um comentário