Currently, I am using the line-clamp feature to restrict the titles on a blog to only two lines at most. This functionality works perfectly fine on Firefox and Chrome browsers; however, when it comes to Safari, the ellipsis appears in the middle of the sentence rather than where it should be.
This issue seems to occur not just with Bootstrap 4 but also in another project built with Foundation 6. It particularly arises when flex is utilized for the grid layout.
<div class="row">
<div class="col-6">
<h1 class="title">
<a href="#">Long title goes here</a>
</h1>
</div>
</div>
Below is the SCSS code being used:
$enh1-font-size: 50px;
$enh1-line-height: 60px;
$enh1-lines-to-show: 2;
.title {
display: block;
display: -webkit-box;
max-height: $enh1-line-height*$enh1-lines-to-show;
margin: 0 auto;
font-size: $enh1-font-size;
line-height: $enh1-line-height;
-webkit-line-clamp: $enh1-lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
The expected output should resemble this:
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam luctus dapibus...
However, what I'm encountering is more like this:
Lorem ipsum dolor sit amet, consectetur
adipiscing el... Etiam luctus dapibus