I'm trying to style the ellipsis (...) of a 3 line piece of text that, when clicked on, reveals the full amount of text using jQuery. Currently I've been able to create a multi-line ellipsis on 3 lines for webkit browsers, but it isn't compatible with all browsers like IE & Firefox but works on Chrome & Edge.
With the influence of this post, I can only style the ellipsis when on one line but not 3 lines of text, making sure it overrules the other CSS.
Does anyone know how to apply this styling but to an ellipsis on the 3rd line? My attempted code is below:
$('.flex-text.description').click(function() {
if ($(this).css('-webkit-line-clamp') == '3') {
$(this).css('-webkit-line-clamp', 'initial');
} else {
$(this).css('-webkit-line-clamp', '3');
}
});.sad-flex {
display: flex;
flex-flow: row wrap;
}
.flex-item {
width: 23.5%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 2%
}
.flex-item:nth-of-type(n+5) {
margin-top: 2%
}
.flex-item-image-link {
width: 100%
}
.flex-item img {
width: 100%;
background-size: cover;
background-position: center;
}
.flex-item,
.flex-text-content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1em;
text-align: center;
position: relative;
font-family: arial;
/* perhaps remove */
justify-content: flex-start;
}
.flex-text-content {
padding: 10px;
width: 100%;
}
.flex-item .flex-text.header {
margin-bottom: 0;
font-weight: 700;
width: 100%;
}
.flex-item .flex-text.header a {
color: #000
}
.flex-item .flex-text.price {
padding-top: 20px;
font-size: 1.4em;
color: grey;
}
.flex-item .flex-text.description {
font-size: 1em;
padding-top: 20px;
overflow: hidden;
width: 100%;
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
/* Other ellipsis method: */
/* max-height: 6em; */
/* limits to 3 lines of text */
/* ellipsis below: */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
/* max-width: 650px; */
/* solves the flex white-space nowrap width pushout problem */
/* Limit to 3 lines, then ellipsis */
}
.flex-item .flex-btn {
border: none;
outline: 0;
padding: 12px;
color: #fff;
background-color: #000;
cursor: pointer;
width: 100%;
font-size: 1.3em;
margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover {
opacity: 0.7
}
.flex-item ul {
text-align: left
}
@media (max-width: 767px) {
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 3%
}
.flex-item {
width: 48.5%
}
.flex-item:not(:nth-of-type(even)) {
margin-left: 0
}
.flex-item:nth-of-type(n+3) {
margin-top: 3%
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sad-flex">
<div class="flex-item">
<a class="flex-item-image-link" href="#" data-galinkprocessed="true"><img src="https://cml.sad.ukrd.com/tp/3x2/" style="background-image:url(https://cml.sad.ukrd.com/image/219581.jpg)"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#" data-galinkprocessed="true">Pine Cone</a></h2>
<span class="flex-text price">$81.52</span>
<span class="flex-text description">A delightful cone made of genuine North American pine, coated with sticky ooze for that authentic natural experience and some more text to just go here anyway and some more text to just go here anyway and some more text to just go here anyway.</span>
</div>
<button onclick="location.href='#'" class="flex-btn">Add to Cart</button>
</div>
</div>I've made a codepen demo to demonstrate this: https://codepen.io/anon/pen/wRObXd