javascript - 将长字显示为多行，结尾带有省略号

我正在尝试在最后显示一个长字并带有省略号。但是最棘手的部分是单词包含多个“-”，在显示省略号之前，我需要将其包装最多2次。单词'abcdef-abcdef-abcdef-abcdef-abcdef-abcdef'的示例：

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

最好的解决方案是什么？欢迎使用CSS和JS

最佳答案

解
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>