<style>
.container{
  width: 200px;

  .item{
    text-align: center;
    margin-bottom: 10px;

    .title{
      white-space:nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .price{

    }

    .button{
      display: none;
    }

    &:hover{
      .title{
        white-space: normal;
      }

      .button{
        display: block;
      }
    }
  }
}
</style>

<div class="container">

  <div class="item">
    <div class="title">Длинный длинный длинный заголовок товара</div>
    <div class="price">12345.67 USD</div>
    <div class="button">
      <button href="#">Купить</button>
    </div>
  </div>

  <div class="item">
    <div class="title">Длинный длинный длинный заголовок товара</div>
    <div class="price">12345.67 USD</div>
    <div class="button">
      <button href="#">Купить</button>
    </div>
  </div>

  <div class="item">
    <div class="title">Длинный длинный длинный заголовок товара</div>
    <div class="price">12345.67 USD</div>
    <div class="button">
      <button href="#">Купить</button>
    </div>
  </div>

</div>