column-Count in css by breaking the line at the beginning of the column

Question

I’m using column-Count in CSS to turn a text into 3 columns, so that’s okay. The problem is that I receive 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 is responsive), the column starts already with a <br> at the top of it, getting ugly, like in the image below:

To explain better, follow my code:

.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... there is another solution?

Answer 1

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

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

.coluna p{
    margin-top: 0;
}

And the 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>
<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>

Answer 2

You can use PHP.

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

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

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

This way, you remove the <br>, and does not create this problem.

Answer 3

If you use like this doesn’t solve your problem?

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

You wouldn’t need to change the database or need that much code.

Answer 4

You can exchange the br for p. I tested and it worked.

<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>