[Resolvido] Quebra de Linha para textos grandes dentro de Divs

sexta-feira, 16 de outubro de 2009

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),"&nbsp")
    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),"&nbsp") - 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),"&nbsp")
    response.Write texto_novo & " "
    next
    %>
</div>

Qualquer dovida comentem.

Valeu e até a proxima

Adriano Moura

0 comentários: