Question

我有两个div作为表格单元格。第二个div包含一长串文本，但我希望它有一个字符限制。

问题是它没有响应。当我缩小页面大小时，由于空格，文本会在页面外运行。

如何让文字环绕，保持其省略号和字符限制，同时不要将左边的图像推出视图？

Codepen：https://codepen.io/weebs/pen/WdZQeY

.alert {
  background: #ebeef2;
}

.thumbnail {
  width: 70px;
  padding-right: 15px;
}

.thumbnail img {
  height: 70px;
  object-fit: cover;
}

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100ch;
}

.thumbnail,
.title {
  display: table-cell;
  vertical-align: middle;
}

<div class="alert">
  <div class="thumbnail"><img src="https://custom1tester.weebly.com/uploads/1/1/5/4/115467141/lake-irene-1679708_orig.jpg" /></div>
  <div class="title">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.</div>
</div>

Answer 1

您需要在包装div（.alert）上添加以下css：

table-layout：已修复; //所以tables大小不依赖于它的内容
宽度：100％;

另外，你可以添加'.thumbnail img''max-width：100％'，这样图像就不会比它的父图像大。

https://codepen.io/bogdanpetru/pen/MrEaOa

如何使字符限制响应的文本？

1 个答案: