css实现文字超出部分展示省略号功能

<span class="country-good-name">海南特产干货椰城昌茂干货海藻50g*2袋海南特产 海鲜干货</span>
<style>
.country-good-name {
    color: #333333;
    width: 3rem;
    font-size: .28rem;
    height: .34rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

效果展示

2.多行文字超出部分显示省略号代码

<span class="govern-good-name">康佳(KONKA) 多用途锅电火锅5L多功能家用鸳鸯火锅 KEP-1500R5</span>
<style>
.govern-good-name {
    color: #333;
    font-size: .24rem;
    height: .6rem;
    margin-top: .03rem;
    padding: 0 .1rem;
    line-height: .3rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /*数字代表展示几行*/
    overflow: hidden;
    text-align: left;
}
</style>

效果展示