Skip to main content

Split Content into Columns - CSS

 

Long text in single paragraph can be nightmare for designer, this can be resolve with column element in CSS. See the demo below in action.

DEMO

Integer vulputate eros ipsum. Ut sed finibus magna. Nam mattis ex non turpis aliquam, eget pellentesque nisi convallis. Mauris commodo vitae est et gravida. Nulla facilisi. Nulla molestie, metus ut ultrices semper, leo nisi ullamcorper nisl, in eleifend augue lorem eu nisi. Aenean et lacus sit amet nisl placerat accumsan. Aenean pharetra erat id ultricies malesuada.

HTML

<p>Integer vulputate eros ipsum. Ut sed finibus magna. Nam mattis ex non turpis aliquam, eget pellentesque nisi convallis. Mauris commodo vitae est et gravida. Nulla facilisi. Nulla molestie, metus ut ultrices semper, leo nisi ullamcorper nisl, in eleifend augue lorem eu nisi. Aenean et lacus sit amet nisl placerat accumsan. Aenean pharetra erat id ultricies malesuada.</p>

CSS

p {
  column-count: 2;
  column-gap: 40px;
  column-rule:  2px solid pink;
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Image Text Wrap-Around - CSS

Text wrap around the image with shape-outside for visual flair! DEMO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at ullamcorper mi imperdiet. Phasellus sit amet rutrum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at u
Post a Comment
Read more

Text Field in Webflow with Material Design Style

Custom Material Design text inputs, using a combination of native Webflow components and some simple HTML and CSS. You can clone the project here , thanks to Steven Hanley. Spent yesterday evening spinning up some @materialdesign text fields using a combination of the @webflow Designer and some simple HTML and CSS. Feel free to clone the project, customize to your liking, and use this component in your next design! ↳ https://t.co/Ti5fVj5V8t pic.twitter.com/KUi1uwW7X1 — steven hanley (@_stevenhanley) December 4, 2019
Post a Comment
Read more

Number Headings - CSS

The counter function in conjunction with counter-* properties to number for headings. DEMO Metallica Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Megadeth Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia. Slayer Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim. Deep Purple Picta aliquam porro maxime minima sed a ullam, aspernatur corporis. HTML < div class = "listNum" > < h2 > Metallica </ h2 > < p > Lorem ipsum dolor sit amet consectetur adipisicing elit . Ut eum perferendis eius .</ p > < h2 > Megadeth </ h2 > < p > Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia .</ p > < h2 > Slayer </ h2 > < p > Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim .<
Post a Comment
Read more