为父级设置溢出时,如何避免在行中间切换文本？

Question

我有固定高度网格项目标题和描述.标题和描述具有不同的长度和字体大小.我需要完全显示标题(通常需要1-4行),其余空间应该进行描述.如何避免在中间切割描述？

.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

我本身无法为您提供解决方案，因为我认为不存在像样的解决方案。但是，我是否可以建议删除导致问题的固定高度，而是使用诸如 Flexbox 之类的东西来将项目高度与行中最高项目的高度相匹配？这是一种不同的方法，但更加灵活。

除了匹配高度之外，我还会考虑使用 SQL、PHP 或 C# 等服务器端语言来限制返回字符串的长度（如果它变得太不舒服），或者修剪它并在标题标签中显示全文。

.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>

截断：

以下是截断各种语言文本的几种方法：

SQL

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

PHP

substr($string,0, 150);

C夏普

string.Substring(0, 150);

JS

string.substring(0, 150);