How to avoid cutting text in the middle of line when overflow set for parent?

Question

I have fixed height grid items with title and description. Title and description have different length and font-size. I need to show title fully (usually takes 1 - 4 lines) and the rest space should take description. How to avoid cutting description in the middle of the line?

.item{
  display: block;
  float: left;
  margin: 10px;
  height: 200px;
  width: 150px;
  padding: 10px;
  background: black;
  color: white;
  overflow: hidden;
}

.title{
  font-size: 21px;
  line-height: 1.5;
}

.description{
  font-size: 14px;
  line-height: 1.5;
}

<div class="item">
  <div class="title">
    One line title
  </div>
  
  <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

<div class="item">
  <div class="title">
    Two lines very long title
  </div>
  
  <div class="description">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 1

I can't offer you a solution per se as I don't think a decent one exists. However, might I suggest removing the fixed height that is causing the issue and instead use something like flexbox to match the item heights with that of the tallest item in the row? It's a different approach but is far more flexible.

In addition to matching the heights I would also consider limiting the length of the string returned (if it becomes too uncomfortable) using a server side language like SQL, PHP or C# or trim it and show the full text in a title tag.

.items {
  display: flex;
  flex-wrap: wrap;
}

.item {
  box-sizing: border-box;
  margin: 10px;
  width: 150px;
  padding: 10px;
  background: black;
  color: white;
  overflow: hidden;
  flex: 0 1 calc(50% - 20px);
}

.title {
  font-size: 21px;
  line-height: 1.5;
}

.description {
  font-size: 14px;
  line-height: 1.5;
}

<div class="items">
  <div class="item">
    <div class="title">
      One line title
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
  <div class="item">
    <div class="title">
      One line title
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div class="item">
    <div class="title">
      Two lines very long title
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div class="item">
    <div class="title">
      Two lines very long title
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div class="item">
    <div class="title">
      Two lines very long title
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div class="item">
    <div class="title">
      Two lines very long title
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Truncation:

Here are a few methods for truncating text in various languages:

SQL

select 
  left(column, 150) + '...' column
from yourtable

PHP

substr($string,0, 150);

C Sharp

string.Substring(0, 150);

JS

string.substring(0, 150);