column-count in css breaking line at the beginning of column

2

I'm using column-count in CSS to turn a text into 3 columns, so far so good. The problem is that I get a text with this MySQL specification:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<br>
Nullam ullamcorper efficitur sem id vehicula.<br>
<br>
Aliquam volutpat volutpat velit eget placerat.

The problem is that often, depending on the screen size (it's responsive), the column starts already with <br> on top of it, getting ugly, as in the image below:

Toexplainmore,followmycode:

.coluna{
	width: 90%;
	height: auto;
	display: block;
	font-size: 18px;
	color: #000000;
  background-color: #ffffff;
	text-align: left;
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;   
	-webkit-column-gap:30px;
	-moz-column-gap:30px;
	column-gap:30px;
}
<div class="coluna">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<br>
Nullam ullamcorper efficitur sem id vehicula.<br>
<br>
Aliquam volutpat volutpat velit eget placerat.<br>
<br>
Proin molestie purus sit amet rutrum ultrices.<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<br>
Vivamus sit amet ante quam.<br>
<br>
Quisque fringilla lacus in venenatis ullamcorper.<br>
<br>
In vel odio eget turpis vehicula dapibus.<br>
<br>
Aliquam erat volutpat.<br>
<br>
Quisque et tellus gravida, tristique ante at, dapibus ipsum.
</div>

Can you avoid this using CSS? If not ... is there another solution?

    
asked by anonymous 09.08.2017 / 16:35

4 answers

4

The only way I found to adjust this is by using jQuery.

I deleted all <br> and included each line of the text within a paragraph <p> with upper margin 0. For this I added css:

.coluna p{
    margin-top: 0;
}

And jQuery:

var novo_texto = ""; // variável para receber o novo HTML da div
$(".coluna br").remove(); // removo todos os BR da div
var lines = $(".coluna").text().split("\n"); // capturo cada linha da div numa Array separadas por nova linha
$.each(lines, function(n, elem) { // loop
    if(elem != ""){ // aproveito apenas as linhas que possuem texto
        novo_texto += "<p>"+elem+"</p>"; // concateno os resultados dentro de um <p>
    }
});
$(".coluna").html(novo_texto); // Substituo o HTML antigo pelo novo

var novo_texto = "";
$(".coluna br").remove();
var lines = $(".coluna").text().split("\n");
$.each(lines, function(n, elem) {
	if(elem != ""){
		novo_texto += "<p>"+elem+"</p>";
	}
});
$(".coluna").html(novo_texto);
.coluna{
	width: 90%;
	height: auto;
	display: block;
	font-size: 18px;
	color: #000000;
  background-color: #ffffff;
	text-align: left;
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;   
	-webkit-column-gap:30px;
	-moz-column-gap:30px;
	column-gap:30px;
}

.coluna p{
	margin-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="coluna">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
Nullam ullamcorper efficitur sem id vehicula.
<br>
<br>
Aliquam volutpat volutpat velit eget placerat.
<br>
<br>
Proin molestie purus sit amet rutrum ultrices.
<br>
<br>
Lorem. ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
Vivamus sit amet ante quam.
<br>
<br>
Quisque fringilla lacus in venenatis ullamcorper.
<br>
<br>
In vel odio eget turpis vehicula dapibus.
<br>
<br>
Aliquam erat volutpat.
<br>
<br>
Quisque et tellus gravida, tristique ante at, dapibus ipsum.
</div>
    
31.08.2017 / 22:25
0

You can use PHP.

Pass the text to a variable. And use the command str_replace of php, see the example below:

$texto = "Linha de texto longo..."

str_replace("<br>","",$texto);

In this way, you remove <br> , and it does not cause this problem.

    
31.08.2017 / 20:12
0

If you use that way, does not solve your problem?

.coluna br:nth-child(odd){
    display: none;
}

You would not need to make any changes to the database or require so much code.

    
01.09.2017 / 22:01
-1

You can change the br's by p. I tested it and it worked out.

<div class="coluna">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p>
Nullam ullamcorper efficitur sem id vehicula.
</p>
<p>
Aliquam volutpat volutpat velit eget placerat.
</p>
<p>
Proin molestie purus sit amet rutrum ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Vivamus sit amet ante quam.
</p>
<p>
Quisque fringilla lacus in venenatis ullamcorper.
</p>
<p>
In vel odio eget turpis vehicula dapibus.
</p>
<p>
Aliquam erat volutpat.
</p>
<p>
Quisque et tellus gravida, tristique ante at, dapibus ipsum.
</p>
</div>
    
31.08.2017 / 20:20