<div class="wrap">
  <div class="box">
    <div class="title">This is Photoshop's version  of Lorem Ipsum.</div>
    <div class="text">Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum.</div>
  </div>
  <div class="box">
    <div class="title">This is Photoshop's</div>
    <div class="text">version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum.</div>
  </div>
</div>
.longTextWithTransfers(@countLine: 2, @fontSize: 16px, @lineHeight: 20px, @fw: 400) {
.text-style(@fontSize, @lineHeight, @fw);
max-height: @lineHeight * @countLine + 4px;
-webkit-line-clamp: @countLine;
-webkit-box-orient: vertical;
display: block;
display: -webkit-box;
word-break: break-word;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}
.wrap{
  display:flex;
  flex-flow:row nowrap;
  justify-content:center;
}
.box{
  width:140px;
  height:140px;
  margin-right:20px;
  padding:10px;
  border:1px solid #000;
  overflow:hidden;
}
.title{
  font-family:Arial, sans-serif;
  font-weight:700;
  font-size:16px;
  line-height:20px;
  margin-bottom:10px
}
.text{
  font-family:Arial, sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:18px;
}
View Compiled
$(document).ready(function(){

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js