Css 设置超过再两行显示省略号

大部分场景都是超过一行就显示...

<template>
  <div class="other-product-item item-name" :title="item.name">{{item.name}}</div>
  <div class="other-product-item item-name" :title="item.name">{{item.name}}</div>
<template>
<script>
  export default {
    return {
      item: {name:'this is a very long name，this is a very long name，this is a very long name'}
    }
  }
</script>
<style lang="scss">
  .other-product-item {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .item-name {
    font-size: 14px;
  }
</style>