javascript - 将长单词显示为多行，末尾带有省略号

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>