CSS：将文本剪切为父 <div> 的大小

Posted 2023-05-07

【中文标题】CSS：将文本剪切为父 <div> 的大小

【英文标题】：CSS: Cutting text to the size of parent <div>

【发布时间】：2017-09-08 07:02:11

【问题描述】：

问题是在子 <div> 中垂直拟合尽可能多的文本，而不会让子 <div> 超出父容器 <div> 并且事先不知道父容器中的剩余空间量。

容器有一个固定的高度和两个孩子。这是一个 html sn-p 示例：

<div class="container">
  <div class="title">
    The title, this must grow as much as needed
  </div>
  <div class="text">
    Some text that goes beyond the size of the container. I want this text to be cut with ellipsis when the container "ends"
  </div> 
</div>

以及对应的样式表：

.container 
  width: 15rem;
  background-color: yellow;
  height: 20rem;


.title 
  font-size: 200%;
  font-wieght: 600;


.text 
  text-overflow: ellipsis;
  border: 2px solid red;

第一个子项（标题）必须根据包含的文本调整其大小。另一个孩子必须使用最多剩余的垂直空间，但不能超过其父母的 fizex 高度。

This jsfiddle 显示了我想要实现的目标。

我需要一个只有 CSS 的解决方案，不能使用 javascript。如果需要，我可以更改 HTML 结构。

在提示添加 overflow: hidden 到容器后编辑：

由于似乎不可能完全按照我的需要去做，我可以不用省略号，所以overflow: hidden 解决方案对我来说没问题。但是我已经尝试过了，但它似乎不起作用：

https://jsfiddle.net/lucrus/8ux1h309/5/

【问题讨论】：

是否应该得到一个滚动条来查看不适合的文本？还是根本看不到多余的文字？

为什么不在.container 元素上只“溢出：隐藏”？

如果您尝试调整文本的字体大小以填充容器 - 请参阅 this topic

【参考方案1】：

使用 Flexbox 非常简单。你只需要在父元素上使用flex-direction: column，在你想要保持高度的元素上使用flex: 1 和overflow: hidden。但是如果你想要多行文本溢出ellipsis，现在用 css 很难做到。

.container 
  width: 15rem;
  background-color: yellow;
  height: 20rem;
  display: flex;
  flex-direction: column;


.title 
  font-size: 200%;
  font-weight: 600;


.text 
  border: 2px solid red;
  overflow: hidden;
  flex: 1;

<div class="container">
  <div class="title">
    The title, this must grow as much as needed
  </div>
  <div class="text">
    Some text that goes beyond the size of the container. I want this text to be cut with ellipsis when the container "ends".<br/><br/>
    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.<br/>
     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>

【参考方案2】：

您需要将overflow: hidden 和white-space: nowrap 添加到.text：https://jsfiddle.net/dgrijuela/8ux1h309/3/

但只会显示 2 行（因为 nowrap），text-overflow: ellipsis 仅适用于 nowrap，因此不能在段落末尾使用省略号。

如果您想剪切段落（不带省略号），请将overflow: hidden 应用于.container。

【讨论】：

更多信息在这里：***.com/questions/7993067/…