html - 如果跨度内的句子太长，则不显示句子，显示点

Question

我不需要常规文本夹，因为我不想要这样的东西:非常长的句子 ---> 非常长...。我只想得到 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>