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

Distortion Glitch Text Effect - CSS

  Use multiple text-shadow properly in CSS on a text by comma separating the values. DEMO Distortion CSS h2 { color : darkorange ; font-family : sans-serif ; font-size : 3.5em ; text-transform : uppercase ; text-shadow : -3px -3px 0 cyan , 3px 3px 0 pink ; }
Post a Comment
Read more

Element Center and Middle - CSS

Make the element center and middle within the specific element width and height is easy using flex. This box centered! HTML   < div class = "box-center" > < strong > This box centered ! </ strong > < div > CSS . box - center { background - color: red; width: 100 % ; height: 200 px; display: flex; align - items: center; justify - content:center; } . box - center strong { background - color: limegreen; padding: 0.5 em; }
Post a Comment
Read more

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...
Post a Comment
Read more