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>