I'm trying to shorten my paragraph using the following CSS code:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
However, the issue is that it condenses everything into one line. I actually want the text to display on 3 lines before truncating. I did some research on Google and discovered WebKit as a possible solution.
webkit-line-clamp
The problem is I'm unsure how to implement it and it's not working for me...
span {
white-space: nowrap;
text-overflow: ellipsis;
width: 250px;
display: block;
overflow: hidden
}<span>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.</span>-webkit-line-clampp {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}<p>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.</p>Alternative to using flexbox for truncating text
To achieve a truncated text effect without relying on flexbox, you can set the height of the text container and utilize the webkit-line-clamp property as shown below:
.line-clamp-3 {
display: block;
display: -webkit-box;
height: 50px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
The text will be displayed in a truncated manner like this: https://i.stack.imgur.com/fDyYL.png
Flexbox solution for truncating text
If you prefer using flexbox for truncating text, you can refer to this guide for implementation details: https://css-tricks.com/flexbox-truncated-text/
.flex-parent {
display: flex;
}
.short-and-fixed {
width: 30px;
height: 30px;
}
.long-and-truncated {
margin: 0 20px;
flex: 1;
min-width: 0;
}
.long-and-truncated span {
display: inline;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
}<div class="flex-parent">
<div class="flex-child short-and-fixed">
</div>
<div class="flex-child long-and-truncated">
<span>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.</span>
</div>
<div class="flex-child short-and-fixed">
</div>
</div>Although it may seem like a basic question, I have never encountered this particular task before. My designer is requesting something similar to this design for checkboxes (positioned on the left side with grey for checked boxes and white for unchecked). ...
My query is similar to this particular one, with slight differences. I am working on a page that includes an anchor, such as page.html#video1. Within this page, there are multiple sections identified by ids like #video1, #video2. Each section comprises of ...
Looking for assistance with changing text direction on each new line. For instance: text left-to-right text right-to-left text left-to-right text right-to-left... etc. I would like the text direction to change with each word-wrap: break-word. Any help w ...
My current project involves creating a full-screen pop-up for a specific application. /* Custom Full Screen Popup */ .fullscreen-popup { position: fixed; top: 0; ...
I have been attempting to integrate uncss into my gulp workflow. In order to exclude certain classes, such as those added through javascript, I am specifying these classes with "ignore" (specifically, I am trying to remove the css from the jquery plugin m ...
Explore www.google.com for inspiration. You will notice a footer containing links to Advertising, Business, and About on the left side, and Privacy, Settings, Terms, etc. on the right side at the bottom of the page. I am an aspiring developer attempting ...
Apologies for repeating this question, but despite extensive discussions on the topic, I am struggling to find a solution for setting up a local development environment using VirtualHost. Currently, I am using XAMPP Portable for Windows, but I believe the ...
I encountered an issue while trying to save files to the storage folder in Laravel after deploying the project on a web server (byethost7.com). The files were only being stored in the public folder. I ran the following command in the command prompt: >p ...
The JSFiddle I currently have is not functioning as expected. When the user directly selects the end-date, it does not restrict the start-date in this particular fiddle. It should change once the user directly changes the end-date. The functionality works ...
My HTML code is set up to display a donut chart with database records retrieved through a PHP script. The data is successfully fetched and visible in the browser console, but the chart itself is not showing up. How can I resolve this issue? console.lo ...
My goal is to trigger my PHP mail(); code with an if statement when an image is clicked. Here's what I've attempted so far: <?php $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="720013041c111d1f02131c0b321 ...
My latest CSS animation project involves creating a stunning 'shine' effect on elements with a specific class. The shine effect itself is flawless, but having all elements shine simultaneously is making it look somewhat artificial. I've bee ...
Here is a section that I have created, you can view the mockup here. The section is divided into 3 parts, each taking up around 33.3% of the width and floated. My goal is to make it so that when a specific element, like .col-one in my example, is hovered ...
I've been tackling a challenge in my Vue.js application, specifically with generating invoices and accurately numbering the pages. An issue arose when printing the invoice – each page was labeled "Page 1 of 20" irrespective of its actual position in ...
Can someone help with an issue I'm having in my code? Here is the snippet where I create a table data element: html += "<td data-id='test' class='journal' style='max-width:200px;'>"+record.source_account_code+"& ...
I am currently working on a website and I have noticed that it doesn't work as well on mobile devices as it does on desktop. There are performance issues that need to be addressed. I've seen other websites redirecting users to a different page wh ...
My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto. I've noticed that when I resize the browser window, the scrollbar slowly disappears ...
Bootstrap utilizes various LESS mixins to create its column classes, along with other classes; .make-grid-columns() { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index} ...
I am currently working on coding a local file on my tablet and I need the Facebook widget to display correctly. However, it appears that the widget is not showing up when viewed from a local file. Is there any way to make it work in this situation? Here i ...
Having trouble getting the gray outline to fill when hovering over it. The method I'm currently using isn't working on any browser. Any suggestions? You can find the HTML with the inline SVG file below: CSS is in a separate file, containing cla ...