CSS3 Multi columns Quebra de texto e cantos arredondados
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="[[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)](http://www.w3.org/1999/xhtml%5B/url%5D)" 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>Discussão (6)
Carregando comentários...