Trim string for given space while word break multiline - html

Question

I have a sidebar where I want to give the heading and the description a max of two lines. However, the height of the span should always be two rows long in order to have the same vertical alignment. Also, I don't want the the last word to break, it should just replace the it with .... For example if the last word wouldn't fit in the given space, it shouldn't just break the word into the next row, instead it should look like this this is my descirpti....
The word should just be cutted and be appended by ....
Also, is it possible to add a class to every div where the text got cutted? I want to have a special style for those cases!
I want to solve this with the CSS property text-overflow
.max-width-200 {
max-width: 900px;
}
span {
overflow: hidden;
text-overflow: ellipsis;
}
.heading-wrapper ,.description-wrapper {
height: 50px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row max-width-200">
<div class="col-3">
<img src="https://picsum.photos/180">
</div>
<div class="col-7 d-flex flex-wrap">
<div class="col-12 no-padding align-self-start heading-wrapper">
<span>This is my heading, its not very long</span>
</div>
<div class="col-12 no-padding align-self-center description-wrapper">
<span>This is my description. This description is longer then it should be. It should only be two rows large but unfortuntly its longer then two rows.</span>
</div>
</div>
</div>
<hr>
<div class="row max-width-200">
<div class="col-3">
<img src="https://picsum.photos/180">
</div>
<div class="col-7 d-flex flex-wrap">
<div class="col-12 no-padding align-self-start heading-wrapper">
<span>This is my heading, Its longer then it should be.. someone fucked it up. Please fix me to be only two rows long!</span>
</div>
<div class="col-12 no-padding align-self-center description-wrapper">
<span>This is my description. This description is longer then it should be. It should only be two rows large but unfortuntly its longer then two rows.</span>
</div>
</div>
</div>
</div>

Answer 1

You can use:
span {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Usually text-overflow: ellipsis; needs a white-space attribute to be set, in order to work. See: https://stackoverflow.com/a/7680712/8177490
You should also check for browser compatibility before using it.
If you don't want the heading to be affected change its tag from span to p or some h tag.