html - 如果span里面的句子太长，不显示句子，显示点

Question

我不想要常规的文本夹，因为我不想要这样的东西:Really long sentence ---> Really long... .我只想得到 3 个点，例如 ... .我已经尝试过

.truncate-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

还有其他解决方案吗？

我的代码

<div class="w-12/12">
    <p class="font-medium text-14 text-color-primary max-w-860 truncate-text">
        <span v-for="tag in tags" :key="tag.id" class="pr-2">
            #{{ tag.name }}
        </span>
    </p>
</div>

Answer 1

您可以尝试像下面这样的视觉黑客:

.box {
  border: 1px solid;
  width: 200px;
  font-size:25px;
  height: 1.2em;
  overflow: hidden;
}
.box::before {
   content:"...";
   display:inline-block;
   width:0;
   text-indent:5px;
}
.box > span {
  display:inline-block;
  padding:0 5px;
  white-space:nowrap;
  background:#fff;
}

<div class="box"><span>Lorem </span></div>
<div class="box"><span>Lorem ipsum</span></div>
<div class="box"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur </span></div>