24px

24px

关注
发信
关注(28)粉丝(399)

把孩子装进家长

本文介绍了把孩子装进家长的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在底部嵌套了一个带有文本的flex元素。顶部元素的固定宽度小于文本：

.list->

header {display：flex;宽度：150px;身高：80px; background-color：#ececec;}。list-component {display：flex; flex：1;填充左：24px; padding-right：24px;}。header-container {display：flex; flex：1;}。header-text {display：flex; flex-direction：column; justify-content：center; overflow：hidden;} span {text-overflow：ellipsis;白色空间：nowrap; overflow：hidden;} < div class =list -header> < div class =list-component> < div class =header-container> < div class =header-text> < span>长长长长长长文字< / span> < / DIV> < / DIV> < / div>< / div>

这是通过向所有元素应用 overflow：hidden; ：
$ b $ p 

  .list-header {display：flex;宽度：150px;身高：80px; background-color：#ececec;}。list-component {display：flex; flex：1;填充左：24px; padding-right：24px; overflow：hidden;}。header-container {display：flex; flex：1; overflow：hidden;}。header-text {display：flex; flex-direction：column; justify-content：center; overflow：hidden;} span {text-overflow：ellipsis;白色空间：nowrap; overflow：hidden;}
< div class =list -header> < div class =list-component> < div class =header-container> < div class =header-text> < span>长长长长长长文字< / span> < / DIV> < / DIV> < / div>< / div>

是不是很喜欢这个解决方案。



有没有办法使用flex属性来修复它？

解决方案

对flex项目的初始设置是 min-width：auto 。这意味着flex项目不能小于其内容的宽度。



您有 white-space：nowrap 在文本元素上。因此，所有弹性项目祖先都必须展开（以多米诺骨牌效应）以适应文本的长度。

受影响的弹性项目为：




  • .list-component

  • .header-container

  • .header-text
    • ul>

    因此，为了防止文本溢出主容器，需要覆盖 min-width：auto 默认。 Flexbox规范提供了两种方法：


    1. 添加 min-width：0 to flex items

    2. 将 overflow 加上 visible 以外的任何值弹性项目。 （这就是为什么您可以通过添加 overflow：hidden 来解决问题的原因，它实际上是一个干净而有效的解决方案。）

    这个行为在这篇文章中有更详细的解释：





    .list-header {display：flex;宽度：150px;身高：80px; background-color：#ececec;}。list-component {display：flex; flex：1;填充左：24px; padding-right：24px;最小宽度：0; / * NEW * /}。header-container {display：flex; flex：1;最小宽度：0; / * NEW * /}。header-text {display：flex; flex-direction：column; justify-content：center;最小宽度：0; / * NEW * /} span {text-overflow：ellipsis;白色空间：nowrap; overflow：hidden;} < div class =list -header> < div class =list-component> < div class =header-container> < div class =header-text> < span>长长长长长长文字< / span> < / DIV> < / DIV> < / div>< / div>

    I have nested flex elements with a text at the bottom. The top element has fixed width that is smaller than text:

    .list-header {
  display: flex;
  width: 150px;
  height: 80px;
  background-color: #ececec;
}

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
}

.header-container {
  display: flex;
  flex: 1;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
    <div class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

    I can fix this by applying overflow: hidden; to all elements:

    .list-header {
  display: flex;
  width: 150px;
  height: 80px;
  background-color: #ececec;
}

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  overflow: hidden;
}

.header-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
    <div class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

    But I don't really like this solution.

    Is there are way to fix it using only flex properties?

    解决方案

    An initial setting on flex items is min-width: auto. This means that flex items cannot be shorter than the width of their content.

    You have white-space: nowrap on the text element. As a result, all flex item ancestors must expand (in a domino effect) to accommodate the length of the text.

    The affected flex items are:

    • .list-component
    • .header-container
    • .header-text

    Therefore, in order to prevent the text from overflowing the primary container, you need to override the min-width: auto default. The flexbox spec provides two methods for doing this:

    1. Add min-width: 0 to flex items
    2. Add overflow with any value other than visible to flex items. (This is why you were able to fix the problem by adding overflow: hidden. It's actually a clean and valid solution.)

    This behavior is explained in more detail in this post: 

    .list-header {
  display: flex;
  width: 150px;
  height: 80px;
  background-color: #ececec;
}

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  min-width: 0;         /* NEW */
}

.header-container {
  display: flex;
  flex: 1;
  min-width: 0;         /* NEW */
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;         /* NEW */
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
    <div class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

    这篇关于把孩子装进家长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 05:05
Powered by LMLPHP ©2024 24px 0.037018