Text Overflow

suggest change

The text-overflow property deals with how overflowed content should be signaled to users. In this example, the ellipsis represents clipped text.

.text {
  overflow: hidden;
  text-overflow: ellipsis;

Unfortunately, text-overflow: ellipsis only works on a single line of text. There is no way to support ellipsis on the last line in standard CSS, but it can be achieved with non-standard webkit-only implementation of flexboxes.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */

Example (open in Chrome or Safari):




Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents