Если предложение внутри диапазона слишком длинное, не показывать предложение, показывать точки

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>