Question

我有一个我正在为用户显示的元素列表以及一个Icon和两个按钮。到目前为止一切顺利，但我希望这个列表可以扩展到移动设备并在必要时缩小。

当列表中的文本太长时，它会阻止页面缩小并强制显示水平滚动条。我想要实现的是长描述文本缩小，最后显示3个点（省略号）。

容器元素显示为flex，文本容器有flex-shrink 1，但它仍然拒绝收缩和溢出。

任何人都可以指导我在这里做错了吗？为什么<select> @foreach($courseCategories as $courseCategory) @foreach($courseCategory->courseNames as $courseName) <optgroup label="{{ $courseCategory }}"> <option value="{{ $courseName }}"> {{ $courseName }} </option> </optgroup> @endforeach @endforeach </select>拒绝缩小？有没有什么办法可以在必要时用CSS强制缩小它？

.mdc-list-item

.mdc-list-item {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdc-list {
  display: flex;
  flex-direction: column;
}

Answer 1

有时您需要查看所有 Flex项目（在HTML结构中上下），并检查他们是否需要, while a plain module uses / overflow覆盖。< / p>

在这种情况下，有更高级别的弹性项目仍默认为min-width，从而防止缩小尺寸。

min-width: auto

.mdc-list-item {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdc-list {
  display: flex;
  flex-direction: column;
}

/* RULES ADDED */
.mdc-list {
   min-width: 0;
}
.mdc-list-item__text {
  overflow: hidden;
}
.mdc-list-item__text__secondary {
  text-overflow: ellipsis;
  overflow: hidden;
}

Flex项目的缩小程度不小于其内容

1 个答案: