How to make a paragraph fit into 2 line and other remain-CodePudding

I have a description that is only 1 line and the other will remain... for the following text. Now I want to add one more line as the image shows.

<v-card-text>
    <p >{{ article.title }}</p>
    <p >{{ article.description }}</p>
</v-card-text>

Related CSS

.article-description {
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 350px;
  max-height: 45px;
}

CodePudding user response：

Try this out it may work for you.

.article-description {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

You can also use min-width to set a minimum width for the container

Thank You

CodePudding user response：

You can use the -webkit-line-clamp CSS property to limit specified number of lines.

For example: Text overflow ellipsis on three lines

-webkit-line-clamp: 3;
-webkit-box-orient: vertical;