Back in the old days, there was a method in Webkit to limit lines using only CSS:
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
While this technique can still be used alongside display: -webkit-flex, it is considered outdated in modern Webkit-based browsers.
My inquiry is:
Is there a way to clamp lines in CSS without relying on the deprecated '-webkit-line-clamp' trick?
As far as I know, the best way to achieve multi-line truncation with ellipsis across different browsers is by using JavaScript. Various solutions for this issue are explored in detail at http://css-tricks.com/line-clampin/
Although not my favorite methods, such challenges are all part of the exciting world of web development.
Check out this CSS snippet:
.line-clamp:after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "...";
font-weight: bold;
padding: 0 20px 1px 45px;
position: absolute;
right: 0;}
.line-clamp {
height: 5.6em;
line-height: 1.4em;
overflow: hidden;
position: relative;}
The CSS Overflow Level 3 specification introduces a new standard property called line-clamp, offering a solution without the drawbacks of the '-webkit-' prefixed method. However, current major browsers do not yet support this feature.
As a temporary workaround, you can utilize a polyfill for browsers that lack native support for line-clamp. CSS-Tricks outlines three alternative solutions, each with its own advantages and disadvantages.
Utilizing standard CSS
.fade {
position: relative;
height: 3.6em; /* equivalent to three lines */
}
.fade::after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.2em;
background:
linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
Pros: Supported by all current browsers. Cons: Outputs fade-out effect instead of ellipsis and requires manual height adjustment.
Using Opera's -o-ellipsis-lastline value
.last-line {
height: 3.6em; /* equivalent to three lines */
text-overflow: -o-ellipsis-lastline;
}
Pros: Renders as expected. Cons: Works only in older versions of Opera and necessitates manual height setting.
Employing JavaScript (Clamp.js)
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});
Pros: Displays content correctly and offers flexibility through various options. Cons: Relies on a JavaScript library for functionality and may be less efficient compared to CSS-based solutions.
It should be noted that the original assumption made in this question, which stated that the -webkit-line-clamp is outdated, may no longer be accurate as of late 2019.
As mentioned in Elad's article, Edge and Firefox have now incorporated support for the useful -webkit syntax, making it essentially the closest thing we have to a standard. While I never expected Microsoft and Firefox to adopt the webkit prefix, now that they have, it seems likely to stay around for quite some time.
I haven't extensively tested it on Edge yet, but it works flawlessly on Safari, Chrome, and Firefox – just remember to steer clear of using padding-bottom.
When a web designer has complete control over the code, it's simple to use the browser's default font - just refrain from making any font changes and you're set. However, if there isn't full control, and for example, there are some fon ...
I'm having trouble applying CSS to certain dojo elements within my Xpage. Here is the CSS style sheet I am using: .formFields { color: rgb(5, 56, 107); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: nor ...
Struggling to replicate a text input from a mockup using Material-UI components. Initially tried rendering a button next to the input, but it didn't match. Moving on to InputAdornments, getting closer but can't get the button flush with the input ...
While working with a text editor, we have the ability to incorporate various HTML tags such as images and videos. However, I am only interested in displaying text fields. When I use {{$loop->content}}, it displays: <p><strong>EXAMPLE</st ...
Is it possible to create an animation that starts with one CSS keyframe set and then transitions into looping another keyframe set indefinitely? ...
I am currently working on creating a login form for a school project website. The section that is posing a challenge for me is determining if I can assign a variable to a href or button. For instance, imagine that the href has the variable 'A' ...
Would like to place a .well div (or a button, whichever works best) within the designated green area shown in this image: here Here is the code I currently have: <div class="container-fluid"> <div class="row row1" style=&q ...
Here is a snippet of my HTML code: <button type="button" class="btn btn-primary ng-cloak" ng-click="ctrl.add(ctrl.userProfile.username)" ng-hide="ctrl.userProfile.added">Add</button> The code above is a part of the larger HTML document shown ...
Discovering a strange behavior in the custom.scss file of Bootstrap, I realized that setting a custom color and removing the !default flag doesn't cascade down as expected. For example, updating $blue to #000 without !default in _custom.scss should id ...
I'm experimenting with IE specific conditional statements to adjust class settings depending on the browser type. Initially, I thought they had this capability, but I can't seem to make it work. Here is a basic example: if the browser is IE, the ...
Hello, I am just starting to explore CSS grid. Take a look at the example below: .platform { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 20px; } .item { width:100%; background-color:#aaa; padding:10 ...
Struggling to make a webpage with a Google Map, Chart, and Grid expand to fill the available space on the screen. Tried various CSS tricks but nothing seems to work. Check out this simplified example in JsFiddle that showcases the issue: http://jsfiddle. ...
I'm currently working on a web application that needs to be compatible with PC, tablets, and mobile phones. I'm interested in integrating Google+ Sharing into the app. However, it appears that when using the url , there are issues with blocking ...
Is there a way to incorporate the Foundation grid while also adding a larger element that stands out from other elements? This large object acts as part of the background, but it's an animated svg, so setting it as a background is not possible. There ...
Upon discovering this website, I was impressed by its smooth scrolling features. The seamless scroll on the site creates a peaceful and calming experience without any abrupt jumps. It responds effortlessly to my mouse wheel, arrow buttons, and spacebar, p ...
How can I create HTML and CSS columns that stick together without manually specifying the "left:" parameter every time? The current example in the fiddle achieves what I want, but requires manual setting of the "left:" value. Is there a way to make this m ...
Initially, I have a page layout divided into four sections resembling something like this. My attempt has been to insert three "inner sections" within each main section as demonstrated here. I am aiming to achieve the following result but I am unsure of ...
I need to arrange multiple tables side by side and allow horizontal scrolling overflow if they don't fit on the page. Here is a sample in jsfiddle: https://jsfiddle.net/c949Lspy/10/ Using Bootstrap: <div style="white-space: nowrap;"> <ta ...
I have set up my navigation tabs using Bootstrap 3 in the following way: <ul class="nav nav-tabs pull-right projects" role="tablist" style="margin-top:20px;"> <li class="active"><a role="tab" data-toggle="tab" href="#progress">In Pr ...
I have an issue with my HTML text element that triggers an animation on page load. I am attempting to write a script that changes the original text to a new one and replays the animation. Here is a snippet of my code: setTimeout(function typewriter() { ...