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>

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

1 个答案: