This question already has answers here:
text-overflow ellipsis on flex child not working [duplicate]
(4个答案)
Why don't flex items shrink past content size?
(1个答案)
去年关门了。
我有一个为用户显示的元素列表,还有一个图标和两个按钮。到目前为止还不错,但我希望这个列表能够扩展到移动设备,并在必要时缩小。
当列表中的文本太长时,它会阻止页面收缩并强制显示水平滚动条。我试图实现的是,长描述文本缩小,在结尾显示3个点(省略号)。
container元素显示为flex,文本容器具有flex shrink 1,但它仍然拒绝收缩和溢出。
有人能告诉我这里做错了什么吗?为什么
(4个答案)
Why don't flex items shrink past content size?
(1个答案)
去年关门了。
我有一个为用户显示的元素列表,还有一个图标和两个按钮。到目前为止还不错,但我希望这个列表能够扩展到移动设备,并在必要时缩小。
当列表中的文本太长时,它会阻止页面收缩并强制显示水平滚动条。我试图实现的是,长描述文本缩小,在结尾显示3个点(省略号)。
container元素显示为flex,文本容器具有flex shrink 1,但它仍然拒绝收缩和溢出。
有人能告诉我这里做错了什么吗?为什么
.mdc-list-item
拒绝收缩?有没有什么方法可以强迫它在需要的时候只使用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>
最佳答案
有时您需要查看所有flex项(上下HTML结构),并检查它们是否需要overflow
/min-width
覆盖。
在这种情况下,有更高级别的flex项仍然默认为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;
}
<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>
关于html - 伸缩元素的收缩幅度不小于其内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47456839/
10-12 19:58