Display long words as multiline with ellipsis on the end

Question

I'm trying to display a single long word with ellipsis on the end. But the tricky part is the word contains multiple '-' and I need to wrap it up to 2 times before showing ellipsis. Example with word 'abcdef-abcdef-abcdef-abcdef-abcdef-abcdef':

|abcdef-abcdef-abcd|
|ef-abcdef-abcdef-a|
|bcdef-abcdef-ab...|

What is the best solution for that? CSS and JS is welcome

Answer 1

solution html

<h2>abcdef-abcdef-abcdef-abcdef-abcdef-abcdef'</h2>

css

<style>
h2 {
 display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width:200px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
 overflow: hidden;
  text-overflow: ellipsis;
}
</style>