我不想要常規的文本夾，因為我不想要這樣的東西：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>
1 回答
元芳怎么了
TA貢獻1798條經驗 獲得超7個贊
您可以嘗試如下所示的視覺黑客：
.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>
- 1 回答
- 0 關注
- 102 瀏覽
添加回答
舉報
0/150
提交
取消