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

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>