时间戳

首页 > 解决方案 > 如何裁剪不适合的网格块内的文本

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

问题描述

我有一个简单的示例代码。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/ 当我减小浏览器的大小时，我看到容器块正在增长并且文本没有被裁剪。
文本不应该移动到另一行，而是应该被切断，怎么做？

标签： csstextcss-grid

解决方案

这是您需要的：

在您的内容中使用white-space: nowrap;，您使用的代码overflow:hidden;将负责其余的工作。

这是小提琴

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

img {
  height: 80px;
}
#hideText{
   overflow: hidden;
   white-space: nowrap;
}
<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 id="hideText">
    <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>

推荐阅读