为 parent 设置溢出时，如何避免在行中间切割文本？

Question

我有带有标题和描述的固定高度网格项目。标题和描述的长度不同 font-size。我需要完整显示标题（通常需要 1 - 4 行），其余 space 应该包含描述。如何避免在行中间切断描述？

.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

您可以在标题中添加一个 min-height 以稍微推动内容并避免在标题为一行时打断文本。

您还可以将标题第一行的 line-height 调整为与其他标题不同，这将帮助您解决 multi-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.1;
  min-height: 40px;
}

.title:first-line {
  line-height: 1.7;
}

.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>
<div class="item">
  <div class="title">
    Two lines very long title 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 very long title title 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 very long title title very long title 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 2

我认为对此没有简单的解决方案。

您可以调整 .title 的 line-height 和 margin 值，以确保文本不会笨拙地剪切。

对于 3 行的标题，一种选择（对于 webkit 浏览器）是添加 text-overflow: ellipsis 并使用 line-clamp 使文本保持在 2 行。

就其价值而言，我认为标题上更紧凑的行高看起来也更好。

.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.2;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.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>
<div class="item">
  <div class="title">
    Three lines makes a 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 3

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

除了匹配高度之外，我还会考虑使用 SQL、PHP 或 C# 或 trim 并在标题标签中显示全文。

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

为 parent 设置溢出时，如何避免在行中间切割文本？

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

html

css

overflow

截断：

SQL

PHP

C 锐

JS