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

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 {&nbsp; border: 1px solid;&nbsp; width: 200px;&nbsp; font-size:25px;&nbsp; height: 1.2em;&nbsp; overflow: hidden;}.box::before {&nbsp; &nbsp;content:"...";&nbsp; &nbsp;display:inline-block;&nbsp; &nbsp;width:0;&nbsp; &nbsp;text-indent:5px;}.box > span {&nbsp; display:inline-block;&nbsp; padding:0 5px;&nbsp; white-space:nowrap;&nbsp; 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>