CSS - Text manipulation and styling

0 votes
245 views
added Jul 18, 2018 in CSS by LC Marshal Captain (25,790 points)
edited Jul 19, 2018 by LC Marshal
/*Break word as per written*/
word-wrap: break-word; white-space: pre-wrap;

/*no break*/
white-space: nowrap; 
 
/*To justify the text in sentences*/
text-align: justify;
 
*Truncate !1 lines
@mixin truncate-2-line () {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
/*Truncate string using Ellipsis */
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 16px;     /* fallback */
  max-height: 32px;      /* fallback */
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
 
/*or this*/
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
/*or for multi lines without dotdot*/
  overflow:hidden; 
  text-overflow-multiline:ellipsis;
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...