以多行显示长字，并在最后使用省略号

Question

我试图在末尾显示带有省略号的单个长字。但棘手的部分是这个词包含多个' - '，我需要在显示省略号之前将其包装2次。例如用字 'ABCDEF-ABCDEF-ABCDEF-ABCDEF-ABCDEF-ABCDEF'：

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

什么是最好的解决办法？ CSS和JS是值得欢迎的

Answer 1

解决方案 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>