CSS Text Overflow
The text-overflow property deals with how overflowed content should be signaled to users. In this example, the ellipsis represents clipped text.
The direction property is used to change the horizontal text direction of an element.
.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.
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 */