Steave
Rank: #20549
26Views
3Comments
display dots in paragraph
Question
Reactive
Application Type
Reactive

Hi,

I have big paragraph which I am trying to display in container. I want to display paragraphs first 2 lines and remaining I want to display ....

For Ex: If this my para

1] Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 

Then I am expecting some like below.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make..


So, if paragraphs length is more than defined area the program will show dots

App Type : REACTIVE


thanks

0
0
on 2020-12-29
Copy link to comment
João Marques
Rank: #70

Hi Steave,


You can achieve that with CSS. On our text, you apply a class, for instance cut-text and define on your theme the following CSS:


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


In this example, it will present the three dots (...) on the third line. But you can change the 3 for a number that fits your needs. A demo of this CSS is available here.


Hope it helps.


Regards,
João

3
0
on 2020-12-29
Copy link to comment

Hi Steave,

to Achieve the required changes you can use the "text-overflow" property in CSS. Set the width and height of the container for that paragraph so that it should show only 2 lines and after that using CSS "..." will appear.

You can refer below  - 

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp


Thanks,

Unnati

0
0
on 2020-12-30
Copy link to comment
Tim Timperman
Rank: #258

Just to be sure, the full text would still be in the html source, right? If you want to prevent that, you'll need to revert to another solution.

(use case: article behind a pay wall)

0
0
on 2020-12-30
Copy link to comment