如何在Vue中设置高度50px之后的文本,然后额外的文本将变为5个句号

s4n0splo  于 2023-03-13  发布在  Vue.js
关注(0)|答案(1)|浏览(167)


〉〉〉〉〉〉〉Sample Sandbox

<div style="height:50px">
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
   </div>
h7wcgrx3

h7wcgrx31#

text-overflow: ellipsis;可以解决这个问题。另外,高度可以被行高整除在视觉上效果很好。

.setheight {
    height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
}
<div class="setheight">
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
</div>

相关问题