无论内容

Question

我很难解释我的问题，看看

body { width: 200px }

.a {
  border: solid 1px black;
  display: flex;
}

.b {
  flex: 1;
}

<div class=a>
  <div class=b>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

我需要的是

body { width: 200px }

.a {
  border: solid 1px black;
  display: flex;
}

.b {
  flex: 1;
}

<div class=a>
  <div class=b>
    <span>aaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

基本上切断文本无论多长时间并保持在1行。我只是无法绕过我弄乱的东西...我试过溢出，文本溢出，自动换行，分词，空格 - 没有运气。

Answer 1

出现这种情况的原因是基于flex行项目的min-width默认为auto。

这意味着它可能小于其内容，因此a中的内容将溢出其父级，并且还会随之推送button。

解决方案是将min-width设置为0，或将overflow设置为visible以外的其他值。

在这种情况下，overflow会更好，如下面的示例所示，因为使用min-width时，溢出的文字将会显示。

Stack snippet

body { width: 200px }

.a {
  border: solid 1px black;
  display: flex;
}

.b {
  flex: 1;
  min-width: 0;
}

.b2 {
  flex: 1;
  overflow: hidden;
}

<div class=a>
  <div class=b>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

<div class=a>
  <div class=b2>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

Answer 2

您可以使用B元素中的max-width和overflow-hidden实现此目的。

'models/es_vgg/init_scaled.caffemodel'

您可以为项目b添加另一个元素和最大高度，以便隐藏水平滚动并且可以选择所有文本。

https://jsfiddle.net/pk7etoka/

Answer 3

你也可以试试这个：

body { width: 200px }

.a {
  border: solid 1px black;
  display: flex;
}

.b {
  flex: 1;
  overflow-x:auto;
  max-width:200px;
}

<div class=a>
  <div class=b>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

您还可以根据您的要求使用其他溢出方法，如overflow：hidden / scroll。