如何在不适合的网格块内裁剪文本

Question

我有一个简单的示例代码。HTML：

<div class="container">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Tux_Enhanced.svg/154px-Tux_Enhanced.svg.png">
  </div>
  <div>
    <p>Lorem ipsum</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Css：

.container {
  display: grid;
  outline: 1px solid;
  grid-template-columns: 80px auto;
  grid-template-rows: 80px;
}

img {
  height: 80px;
}

.text {
  overflow: hidden;
}

是：https://jsfiddle.net/6f7yukho/当我减小浏览器的大小时，我看到容器块正在增大，并且文本没有被裁剪。文本不应移至另一行，而应被截断，该怎么办？

Answer 1

这里是您需要的：

Answer 2

将文本类移动到包含两个p标签的块上：