If sentence inside span is too long, don't show sentence, show dots

user_9213093 0
Viewed 151

I don't want regular text clamp, because I don't want something like this: Really long sentence ---> Really long.... I want to get only 3 dots like .... I already tried with 

.truncate-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

Is there any other solution?

My code

<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>
css html
1 Answers

You can try a visual hack like below:

.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>

user_86203330
Related