How to limit text in columns with CSS?

Asked

Viewed 176 times

2

I’m taking a text from the database: 

<p> texto um pouco curto </p>

And displaying using Columns css in 3 parts, but would like to know if it is possible to block the text by only creating another column after the </p>.

#textocolunas {
    font-size: 12pt;
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: 5px;
       -moz-column-gap: 5px;
            column-gap: 5px;
    -webkit-column-rule: 1px solid #C0C0C0;
       -moz-column-rule: 1px solid #C0C0C0;
            column-rule: 1px solid #C0C0C0;
}

Follow an edited fiddle of how it is:

updated the jsfiddle

inserir a descrição da imagem aqui

css
  • 1

    Can’t understand your question, friend

  • Could you rephrase your question? It’s a little incomprehensible.

  • Still confused.

  • the texts will be added randomly, it is not the same always in this case would only solve this problem

  • It is automatically setting the height to create the 3 columns you requested. If you give a fixed height to the element, the content only breaks column when exceeding that height.

  • I changed and nothing. keeps overtaking

Show 1 more comment

1 answer

0

Unfortunately this is not yet possible. And as amazing as it sounds, column printing only works on IE. In firefox you print the columns, but you still have some errors. And in Chrome, you don’t print the columns.

Access the website of w3c or the Mozilla Developer Community.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.