show text only first two row

Question

Hi all I have following code: my code

How can I show only first two row?

I try this:

    .wrapper {
           border: 1px solid blue;
           width: 608px;
          }
    .text {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
          }
    

    <div class="wrapper">
      <div class="text">
        Since the introduction of inkjet printing is in the latter half of the
        1980s, inkjet printers have grown in popularity and performance while
        dropping significantly in price. Since the introduction of inkjet
        printing is in the latter half of the 1980s, inkjet printers have grown
        in popularity and performance while dropping significantly in price.
      </div>
    </div>

but it only show first row, but I need only two

score 1 · Accepted Answer · answered Feb 26 '21 at 08:44

Can you please check the below code? Hope it will work for you. You need to just add line-clamp property in .text

Please refer to this link: https://jsfiddle.net/yudizsolutions/1bvunLzf/1/

.wrapper {
  border: 1px solid blue;
  width: 608px;
}

.text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="wrapper">
  <div class="text">
    Since the introduction of inkjet printing is in the latter half of the
    1980s, inkjet printers have grown in popularity and performance while
    dropping significantly in price. Since the introduction of inkjet
    printing is in the latter half of the 1980s, inkjet printers have grown
    in popularity and performance while dropping significantly in price.
  </div>
</div>

show text only first two row

1 Answers1