以多行顯示長字，並在最後使用省略號

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>