Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Luiz C. Dias

CSS3 Multi columns Quebra de texto e cantos arredondados

Por , em Desenvolvimento frontend

Recommended Posts

Luiz C. Dias    0

Luiz C. Dias
Postado

Prezados,

 

Estou postando uma dúvida quanto ao uso de Multi columns em CSS3. Fiz um exemplo em Php para teste com 5 colunas e insiro vários textos a partir de um array que por sua vez foram lidos de um arquivo .txt.

 

1) Usei uma div com classe MultCol onde configurei as 5 colunas, e estas funcionaram, o texto foi distribuído mas quando o texto chega ao final de uma coluna, ocorre quebra no meio do texto que estiver neste ponto interrompendo o texto e continuando no topo da coluna seguinte. Eu gostaria que não houvesse a quebra dentro do texto, e o novo texto iniciasse na coluna seguinte mas não consegui resolver este problema. (Este é o meu problema principal).

 

2) Também tentei colocar cada uma das colunas com cantos arredondados no topo e em baixo mas consegui faze-lo apenas na primeira e na última, que são as colunas externas, da esquerda e da direita.

 

Fiz um exemplo simplificado para mostrar o funcionamento, que foi postado no Link: www.luizcdias.com

 

Abaixo envio o código fonte deste exemplo.

 

Agradeço-lhes antecipadamente pela ajuda dos inúmeros colaboradores do IMaster.

 

Luiz Carlos

 

 

Código exemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//
TransationalEN" "[url=http://www.w3.org/TR/xhtml/DTD/xhtml11-.dtd]http://www.w3.org/TR/xhtml/DTD/xhtml11-.dtd">[/url]
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" xml:lang="pt-br">
<head>
  <title>Teste Multi Colunas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
 
body {
  font:                   16px Arial, Helvetica, sans-serif;
  color:                  #000000;
}
 
#cDivPri      {
  width:                  1008px;
  height:                 600px;
  border:                 1px solid #FF0000;
  float:                  left; 
  opacity:                1;
  margin:                 20px 0px 0px 2px;
  position:               relative;
}
 
div.MultCol    {
  -moz-column-count:      5;
  -webkit-column-count:   5;
  column-count:           5;
  -moz-column-gap:        80px;
  -webkit-column-gap:     80px;
  column-gap:             80px;
  -moz-column-rule:       1px solid #CCC;
  -webkit-column-rule:    1px solid #CCC;
  column-rule:            1px solid #CCC;
  -moz-break-inside:      avoid-column;
  -webkit-break-inside:   avoid-column;
  break-inside:           avoid-column;
  -moz-border-radius:     12px;  
  -webkit-border-radius:  12px;
  -o-border-radius:       12px;
  -ms-border-radius:      12px;
  border-radius:          12px;
  text-align:             center;
  border:                 1px solid #CCC;
/* Na linha a seguir estava tentando criar uma estilização compativa com cada coluna /*
/*  background:             repeating-linear-gradient(to right, #CDF0F6 20px, white 250px, #CDF0F6);  */ 
  background-image:       linear-gradient(to left, white, #CDF0F6, white); 
  padding:                0 40px 0 40px;
}
 
</style>
 
</head>
 
<?Php                      
 
echo "<body>";
echo "<div id='DivPri'>";
  $File='../Arq/Tex/Frases.txt';
  @ $Arq = fopen($File,'r');
  if (!$Arq) {
    echo 'Principal-Leitura do arquivo '.$File.' falhou';
    exit;
  }
 
  $a = array('zero');
  $I = 0;
  while (!feof($Arq)) {
    $a[$I] = trim(fgets($Arq,999));
    ++$I;
  }
  fclose($Arq);
  shuffle($a);
  echo "<div class='MultCol'>";
    for ($X=0;$X<$I;++$X) {
      echo "<span>";
        echo $a[$X]."<p>";
      echo "</span>";
    }
  echo "</div>";
echo "</div>";
echo "</body>";
 
?>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Electronic    124

Electronic
Postado

Desse jeito nao dá
cada coluna teria que ser uma div

e isso não é certo
echo "<span>";
echo $a[$X]."<p>";
echo "</span>";

p é elemento em bloco não pode ir dentro de span que é elemento em linha, o contrario pode, mas também não pode por todo um texto dentro de um span

span serve para destacar alguma palavra dentro de um texto ou frase com css pois ele por si só não da diferença visual

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luiz C. Dias    0

Luiz C. Dias
Postado

Caro Eletronic,

 

Obrigado pelas suas orientações..

 

Retirei o span e o <p>, coloquei <br><br> mas não resolveu o problema da quebra no texto que estou tentando fazer sem "gambiarra" para aprender a fazer certo embora pois não sou expert em CSS3.

 

Muito obrigado,

 

Abs,

 

Luiz

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luiz C. Dias    0

Luiz C. Dias
Postado

Prezados,

 

No último Post do nosso amigo Eletronic, este nos passou o link: http://zomigi.com/bl...-multi-columns/

 

Entrei neste link e fui lendo-o atentamente até que encontrei o Post abaixo de Abril/2014 escrito por Olivier Larochelle sugerindo uma div com display: inline-block. (vide o Post mais abaixo).

 

Experimentei no meu script substituir o "span" pela div, dentro de multi-columns e as quebras de column funcionaram corretamente tanto no chrome quanto no mozila. Nos demais navegadores ainda não testei.

 

Com isto o problema da quebra foi resolvido.

 

CSS da div:

 

#Item {
display: inline-block;
}
Div no Php:

 

echo "<div id='Item'>";
echo $a[$X].'<p>';
echo "</div>";
É claro que como o tamanho de cada bloco de texto são de tamanhos diferente, e que cada vez que são apresentados eles são apresentados em posições diferentes e aleatórias, cada coluna apresenta linhas vazias na parte inferior, inclusive em parte também causados pelo "<p>" no script, mas este problema considero até aceitável, caso não seja obtida solução melhor.
Já inclui estas alterações no código postado e o resultado poderá ser visto no link www.luizcdias.com
Manterei ainda o Post em aberto para ver se surgem novas melhorias a partir daí, inclusive quanto a criar cantos redondos em cada uma das columns conforme citado no post inicial.
Agradecemos ao Eletronic pela indicação do link que possibilitou esta melhoria.
Muito obrigado,
Luiz C. Dias
---------------------------------------------------------------------------------------- X X X ------------------------------------------------------------------------------

Olivier Larochelle

APRIL 27TH, 2014

I simply add « display : inline-block; » on my paragraph tags. This way, they aren’t cut in half to display on two separate columns. This leads to unequal column heights, but I can very easily live with that.

Add some margin on these same paragraph tags and, since they are displayed whole in a single column, your margin properties will apply and the breathing space your text needs will be respected. Solves this deal-breaking for me… using only CSS.

Might not be the right solution for everyone… possibilies are, as always, endless… but it does the trick for my needs of displaying texts and images.

Hope this helps…

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito