Dividir o texto

Hello mates,

Então... fiz um planejamento que vai até o final do ano para atualizar o site da empresa que trabalho e torná-lo compatível com iPad e mídias sociais. O projeto ficou bacana e estou na fase de estudar o layout ideal.

Estou desenvolvendo a "cara" do site no Photoshop, e usando linhas guias para "visualizar" tabelas e divs, etc.

Sempre tive dificuldade pra me adaptar com o DW.... então faço tudo no editor de texto mesmo (uso o PSPad ou o notepad mesmo).

Estou montando agora um "boneco" em HTML e JS para estudar a viabilidade do layout, estética, usabilidade, etc, etc.

O resultado está mais ou menos assim.

Então comecei a imaginar a Administração para os canais e para o conteúdo dos canais.

E foi onde percebi o problema do layout que estou usando. Veja aqui um exemplo do conteúdo de canal.

O problema é que, ao inserir o conteúdo, não tenho como pré-determinar o número de caracteres... mas o espaço para cada content é limitado. Então eu preciso dividir o texto ao carregar a página, tipo uma páginação.

O processo seria mais ou menos assim:

1. Insere o conteúdo na página de administração

2. O conteúdo é armazenado no BD

3. A página carrega o conteúdo e, conforme o número de caracteres, divide o conteúdo em DIVs

Estou usando o Foundation Zurb (Orbit) e jQuery como frameworks. E ainda não iniciei a programação em PHP.

Mas como já percebi que essa será a grande questão, peço algumas ideias de como posso resolver isso.

Valeu galera!!!

Só para esclarecer como funciona o Orbit da Foundation.

A estrutura é essa:

<div id="featured">
<div class="content" style="">Conteúdo 1</div>
<img src="conteudo.jpg" />
</div>

O jQuery é usado pelo framework da Foundation pra buscar o ID "featured" e fazer os slides.

As tags <img> são impressas na tela já como slides, sem necessidade de qualquer código acessório.

Mas quando o conteúdo a ser carregado é texto, é necessário colocálo numa <div> com a classe CSS "content".

 

Como tenho muitas partes dinâmicas, preciso de muito conteúdo nessas <divs>, mas eles tem que ser montados automaticamente.

Para fins de curiosidade, testem no iPad, para ver como está ficando e qual a ideia. No monitor não dá para perceber direito ;)