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

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>