动态挠曲盒宽度

Question

你好，我有问题要解决这个布局使用css弹出框。我想在文本中使用省略号，但是如果我有很长的文本内容，它就会把其他元素从盒子里推出来。

​

​

如果我删除显示:内容-2-包装的灵活性，它似乎是有效的。但我想知道是否可能有一个动态宽度的内容-2-包装取决于容器宽度。在文本中使用省略号。

我添加代码：

​

.container {
  max-width: 300px;
  width: 100%;
  padding: 16px;
  background-color: magenta;
  
}

.d-flex {
  display: flex;
  padding: 16px;
  flex-wrap: nowrap;
}

.content-1 {
  background-color: red;
  padding: 16px;
}

.content-2-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-2a {
  background-color: blue;
  padding: 16px;
}

.content-2b {
  background-color: gray;
  padding: 16px;
}

.content-3 {
  background-color: yellow;
  padding: 16px;
}

.content-4 {
  background-color: green;
  padding: 16px;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="container">
  <div class="d-flex">
    <div class="content-1">
      1
    </div>
    <div class="content-2-wrapper">
      <div class="content-2a ellipsis">
        Very long content that breake my flex layout
      </div>
      <div class="content-2b ellipsis">
        second-content
      </div>
    </div>
    <div class="content-3 ellipsis">
      another content
    </div>
    <div class="content-4 ellipsis">
      last content
    </div>
  </div>
</div>

​

Answer 1

你只需要做两件事：

• 将min-width: [something]设置在直接的flex子程序上。如果不设置值，则默认使用auto。
• 在.d-flex和任何具有宽度/最小宽度和定义填充的.

的元素上设置box-sizing: border-box。

​

.container {
  max-width: 300px;
  width: 100%;
  padding: 16px;
  background-color: magenta;
  
}

.d-flex {
  display: flex;
  padding: 16px;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.content-1 {
  background-color: red;
  padding: 16px;
  min-width: 25%;
  box-sizing: border-box;
}

.content-2-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 25%;
}

.content-2a {
  background-color: blue;
  padding: 16px;
}

.content-2b {
  background-color: gray;
  padding: 16px;
}

.content-3 {
  background-color: yellow;
  padding: 16px;
  min-width: 25%;
  box-sizing: border-box;
}

.content-4 {
  background-color: green;
  padding: 16px;
  min-width: 25%;
  box-sizing: border-box;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="container">
  <div class="d-flex">
    <div class="content-1">
      1
    </div>
    <div class="content-2-wrapper">
      <div class="content-2a ellipsis">
        Very long content that breake my flex layout
      </div>
      <div class="content-2b ellipsis">
        second-content
      </div>
    </div>
    <div class="content-3 ellipsis">
      another content
    </div>
    <div class="content-4 ellipsis">
      last content
    </div>
  </div>
</div>

​