The Problem
You have an area of text that needs to automatically truncate to fit the space.
Solution #1: Single Line Text
p {
max-width: 150px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
Solution #2: Multiple Lines of Text
p {
line-height: 2rem;
max-height: 8rem;
-webkit-box-orient: vertical;
display: block;
display: -webkit-box;
overflow: hidden !important;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
}