html – Setting a max character length in CSS

html – Setting a max character length in CSS

You could always use a truncate method by setting a max-width and overflow ellipsis like this

n

p {n  white-space: nowrap;n  overflow: hidden;n  text-overflow: ellipsis;n  max-width: 200px;n}n

n

An example:

n

n

n

.wrapper {n  padding: 20px;n  background: #eaeaea;n  max-width: 400px;n  margin: 50px auto;n}nn.demo-1 {n  overflow: hidden;n  display: -webkit-box;n  -webkit-line-clamp: 3;n  -webkit-box-orient: vertical;n}nn.demo-2 {n  overflow: hidden;n  white-space: nowrap;n  text-overflow: ellipsis;n  max-width: 150px;n}

n

<div class=wrapper>n  <p class=demo-1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>n</div>nn<div class=wrapper>n  <p class=demo-2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>n</div>

n

n

n

For a multi-line truncation have a look at a flex solution.nAn example with truncation on 3 rows.

n

p {n  overflow: hidden;n  display: -webkit-box;n  -webkit-line-clamp: 3;n  -webkit-box-orient: vertical;n}n

n

An example:

n

n

n

p {n  white-space: nowrap;n  overflow: hidden;n  text-overflow: ellipsis;n  max-width: 200px;n}

n

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!</p>

n

n

There is a CSS length value of ch.

n

From MDN

n

n

This unit represents the width, or more precisely the advance measure,n of the glyph 0 (zero, the Unicode character U+0030) in the elementsn font.

n

n

This may approximate what you are after.

n

n

n

p {rn  overflow: hidden;rn  max-width: 75ch;rn}

n

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consecteturrn  adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>

n

n

html – Setting a max character length in CSS

Try this for truncating characters after setting it to max-width. I have used 75ch in this case

n

n

n

p {rn    white-space: nowrap;rn    overflow: hidden;rn    text-overflow: ellipsis;rn    max-width: 75ch;rn}

n

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.</p>

n

n

n

For multiline truncating, please follow the link.

n

An example: https://codepen.io/srekoble/pen/EgmyxV

n

We will be using webkit css for this. In short WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. This may be brower specific as every browser is backed by a rendering engine to draw the HTML/CSS web page.

Leave a Reply

Your email address will not be published.