Truncate String Using CSS

Some Related Posts:-

All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Note the fixed width in use here. The gist is that the element needs some kind of determinate width, which you have to be particularly careful about with flexbox:

See also  Create A 3D Hexagon Grid Layout with CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *