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

Native Accordion - HTML

  Use details element to create native accordion, is so simple and effective without javascript. Tap here to see more details Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis. Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia. HTML < details > < summary > Tap here to see more details </ summary > < article > Lorem ipsum dolor sit amet consectetur adipisicing elit . Ut eum perferendis eius . Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis . Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus qui...
Post a Comment
Read more

Introduction

Hello world,  UIUX Component  is for those who newbie in HTML, CSS and JavaScript for their new career as Web Designer, Web Developer, Web Editor etc. We try our best to make sure we update the code which applicable for your daily routine in web development or maybe some for Apps content.  To utilise this site you should have basic knowledge on HTML, CSS and JavaScript. If you still not sure what we talking about, we have a few suggestion on where you should to start your knowledge. What is HTML HTML stands for Hyper Text Markup Language, the standard markup language for creating Web pages. Describes the structure of a Web page, consists of a series of elements which elements tell the browser how to display the content also elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. HTML Tutorial What is CSS CSS stands for Cascading Style Sheets, describes how HTML elements are to be displayed on screen, pape...
Post a Comment
Read more

Audio Player - HTML

The HTML <audio> element is used to play an audio file, here are three supported audio formats MP3, WAV, and OGG for Safari OGG is not supported for now. DEMO Your browser does not support HTML audio. HTML < audio controls > < source src = "https://actions.google.com/sounds/v1/cartoon/crazy_dinner_bell.ogg" type = "audio/ogg" > < p > Your browser does not support HTML audio .</ p > </ audio > Muted < audio controls muted > < source src = "https://actions.google.com/sounds/v1/cartoon/crazy_dinner_bell.ogg" type = "audio/ogg" > < p > Your browser does not support HTML audio .</ p > </ audio >
Post a Comment
Read more