防止溢出：使用flexbox列时隐藏在中间剪切文本答案

【问题标题】：Prevent overflow:hidden from cutting text in the middle when using flexbox column防止溢出：使用flexbox列时隐藏在中间剪切文本
【发布时间】：2021-02-12 05:09:29
【问题描述】：

我想创建一个带有标题、正文和页脚的固定高度卡片。标题和页脚可以是一行或多行，正文应展开以填充剩余空间。

.card {
  display: flex;
  flex-direction: column;
  height: 192px;
  width: 300px;
  border: 1px solid;
  padding: 12px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.body {
  flex: 1 1 auto;
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
  margin-bottom: 8px;
}

<div class="card">
  <div class="title">
    This is a title
  </div>
  <div class="body">
    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>
    footer text
  </div>
</div>

如何防止正文被截断？ overflow-wrap/word-wrap好像没有效果。

【问题讨论】：

在您的示例中，您同时设置了一个高度和一个高度。如果文本不合适，您是否希望容器水平增长？
不，只是想要固定宽度。
试试css属性overflow-y: scroll;
也就是说，你希望最后一行要么完全可见，要么根本不可见？
@TemaniAfif 是的，完全正确

标签： css flexbox

【解决方案1】：

您必须使高度成为一条线高度的倍数。这是一个使用 CSS 网格的示例。

调整主容器的大小以查看神奇之处：

.card {
  display: flex;
  flex-direction: column;
  height: 192px;
  width: 300px;
  border: 1px solid;
  padding: 12px;
  overflow: hidden;
  resize: both;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.body {
  flex: 1 1 auto;
  margin-bottom: 8px;
  line-height: 1.2em; /* height of one line */
  display: grid;
  grid-template-rows: repeat(auto-fit, 1.2em); /* same as line-height here */
  grid-auto-rows: 0;
}

.body>div {
  grid-row: 1/-1;
  overflow: hidden;
}

<div class="card">
  <div class="title">
    This is a title
  </div>
  <div class="body">
    <div>
      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>
    footer text
  </div>
</div>

【讨论】：