An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Simplebits
- Joshua Blankenship
- Pearsonified
- Spoon Graphics
- Abduzeedo
- FanExtra - PSD
- Web Design Ledger
- Willems Lab
- Dev To
- Hashedout
Help Webnuz
Referal links:
Truncate String with CSS
In this article, I am going to cover how you can create truncate strings or paragraphs by just using CSS.
What is Truncate?
Truncate means to make something shorter, especially by cutting off the top or end. In paragraphs, we make the string shorter by cutting the lines.
Lorem Ipsum is simply a 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.The above paragraph contains 4 lines and we want to make it short to two lines. like this -
Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when....How to use it?
First, let's take a look at how my HTML is looking-
<div class="container"> <h3>Truncate-2 (two line)</h3> <p class="truncate-2">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 leapinto 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.</p></div>So as you can see I've applied the truncate-1 class to the paragraph. This class contains the following properties-
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; /* Change the number as per your requirement */ -webkit-box-orient: vertical; overflow: hidden;}After that result is something like this-
Codepen-
Wrapping Up
If you enjoyed this article then don't forget to press and Bookmark it for later use. If you have any queries or suggestions don't hesitate to drop them. See you.
My Newsletter
Original Link: https://dev.to/j471n/truncate-string-with-css-2oa3
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To