问题：

Flex项目不收缩小于其内容[重复]

越学文

2023-03-14

我有一个为用户显示的元素列表，还有一个图标和两个按钮。到目前为止还不错，但我希望这个列表能够扩展到移动设备，并在必要时缩小。

当列表中的文本太长时，会阻止页面收缩，并强制显示水平滚动条。我试图实现的是，长描述文本缩小，在末尾显示3个点（省略号）。

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

有人能告诉我我做错了什么吗？为什么是。mdc列表项拒绝收缩？是否有任何方法可以在必要时仅使用CSS强制收缩它？

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

.mdc-list {
  display: flex;
  flex-direction: column;
}

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;">
  <ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;">
    <li class="mdc-list-item" title="Test Item 1 Description" channel-id="1">
      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">
        Test Item 1
        <span class="mdc-list-item__text__secondary">Test Item 1 Description</span>
      </span>

      <div class="mdc-list-item__end-detail">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
          X
        </i>
      </div>
      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
          Y
        </i>
      </div>
    </li>
    <li role="separator" class="mdc-list-divider"></li>
    <li class="mdc-list-item" title="Here you can read the long description of Item 2 which refuses to shrink" channel-id="2">
      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">
        Test Item 2
        <span class="mdc-list-item__text__secondary">Here you can read the long description of Item 2 which refuses to shrink</span>
      </span>

      <div class="mdc-list-item__end-detail">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
          X
        </i>
      </div>
      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
          Y
        </i>
      </div>
    </li>
  </ul>
</div>

共有1个答案

宇文鸿振

2023-03-14

有时，您需要查看所有flex项（HTML结构上下），并检查它们是否需要溢出/最小宽度覆盖。

在这种情况下，更高级别的弹性项仍然默认为minwidth: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;
}

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;">
  <ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;">
    <li class="mdc-list-item" title="Test Item 1 Description" channel-id="1">
      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">
        Test Item 1
        <span class="mdc-list-item__text__secondary">Test Item 1 Description</span>
      </span>

      <div class="mdc-list-item__end-detail">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
          X
        </i>
      </div>
      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
          Y
        </i>
      </div>
    </li>
    <li role="separator" class="mdc-list-divider"></li>
    <li class="mdc-list-item" title="Here you can read the long description of Item 2 which refuses to shrink" channel-id="2">
      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">
        Test Item 2
        <span class="mdc-list-item__text__secondary">Here you can read the long description of Item 2 which refuses to shrink</span>
      </span>

      <div class="mdc-list-item__end-detail">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
          X
        </i>
      </div>
      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
          Y
        </i>
      </div>
    </li>
  </ul>
</div>

类似资料：

防止CSS3 flex收缩挤压内容物

我试图在CSS3中创建一个灵活的布局，3个盒子互相堆叠。这些框是兄弟姐妹，因此具有相同的父元素。第一个盒子的高度必须适合它的内容。以下两个框的高度将增长以适应各自的内容，直到它们即将溢出其父框。在这种情况下，它们应该收缩，以免溢出。问题是，我不知道如何防止其中一个收缩的盒子被压碎，如果它的内容相对于另一个收缩的盒子来说是小的。我希望这些框缩小到某一点，不再缩小，比如说相当于两行文本。设置不是一个
窗口变小时弹性项不收缩[重复]

我正在尝试在CSS flexbox中，将两个相邻的绘图拟合到一起。我希望它们在调整窗口大小时调整大小。当窗口变大时，它会按预期工作，但当窗口变小时，绘图不会缩小。 JSFiddle：https://jsfiddle.net/bd0reepd/ 我可能误解了flexbox的工作原理，但如果我用图像替换绘图，它们会像预期的那样缩小。我试着调试它，发现plotlys的内部函数，它调用并相应地设置打印大
为什么弹性项目不能缩小到超过内容大小？

问题内容：我有4个flexbox列，并且一切正常，但是当我向列中添加一些文本并将其设置为大字体时，由于flex属性，它使列变宽了。我尝试使用它并对其有所帮助，但是当我将列的大小调整为非常小的宽度时，仍然将文本中的字母分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。（开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循flex设置； flex大小为1：3
使用flex[重复]对齐项目

我有如下要求：一个元素位于视口的左侧，两个元素位于视口的右侧。为了学习，我尝试了不包装元素的布局。这种布局在FlexBox中可能吗？下面是HTML：我尝试使用和，但没有用。请帮忙。 CSS：
如何阻止Tkinter Frame收缩以适合其内容？

问题内容：这是给我麻烦的代码。如果我用标签注释掉行，则框架显示为正确的宽度。但是，添加标签似乎将框架缩小到标签的大小。有办法防止这种情况发生吗？问题答案：默认情况下，以及缩小或放大一个小部件，以适应其内容，这是你想要什么的时候99.9％。描述此功能的术语是“几何传播”。还有一个命令以打开几何传播或使用时关闭（和类似的一个为）。由于您使用的是pack，因此语法为：或也许，取决于您实际
弹性收缩不更新项目宽度

更新：如果我必须使用flexbox，我认为没有简单的解决方案。我将使用“flex shrink:0”并使用媒体查询来调整设计。无论如何，谢谢你的帮助。我有一个水平列表（显示： flex）与多个元素。当我缩小窗口大小时，列表元素开始缩小。不幸的是，元素的宽度几乎保持不变。锂元素占据了太多的空间。我希望li-元件的大小适合内容。如果我把"flex-收缩： 0"添加到li-元素中，宽度是正确的，但是我

Flex项目不收缩小于其内容[重复]

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档