Question

我有两个灵儿。我不知道那些孩子的大小，但我希望.right（其中包含未知但有限数量的例如状态图标）不会破坏，并且适合在线，而.left孩子（其中包含可能太长文本的标签，以便.right孩子适合。

在代码段中，.left应该会破坏文字，以便.right适合。这两个孩子都不应该溢出.container。

我可以在word-break: break-word上使用.left来完成此操作，但这不符合标准。我也可以使用word-break: break-all，但这不会尝试将该单词包装在下一行（如word-wrap那样），首先，这是不可取的。 word-wrap: break-word没有做任何事情。

如上所述，我无法在width: calc( 100% - <right-width> )上使用.left，因为我不知道.right孩子的宽度。

注意：孩子的height: 20px只是为了查看父容器。这不是要求的一部分。

奖励：在示例中，.container的宽度是已知的，但也可能不知道（即它可能以某种方式继承它）。

.container {
  display: flex;
  width: 200px;
  height: 40px;
  background: pink; 
}

.left {
  background: rgba(0,255,0,.1);
  height: 20px;
  
  // word-break: break-word; // works in WebKit, but non-standard
  word-wrap: break-word;
}

.right {
  background: rgba(0,0,255,.1);
  height: 20px;
}

<div class="container">
  <div class="left">xoxoxoxoxoxoxoxoxoxoxoxoxoxoxox</div>
  <div class="right">rarararara</div>
</div>

Answer 1

min-width: 0上的left确保元素不会auto - 调整大小为父Flex容器，并根据需要进行换行。它可以替换为overflow: hidden，其same effect。

如果留给auto（默认min-width弹性值），如果它太大，它会溢出容器。（感谢@Michael_B）
flex: 1（flex: 1 0 0的简写，或flex-grow: 1; flex-shrink: 0; flex-basis: 0）确保left成长并将right元素推向右侧（感谢@LGSon）< / LI>
right具有初始弹性值（flex: 0 1 auto），可确保其不会出现断字，也不会超出其内容大小。

WTBS，如果它太大，它还需要word-wrap: break-word; min-width: 0与左边相同。

注意：删除了不属于OP要求的20px高度。

＆＃13;

.container {
  display: flex;
  width: 200px;
  background: pink; 
}

.left {
  background: rgba(0,255,0,.1);
  word-wrap: break-word;  
  min-width: 0;
  flex: 1;
}

.right {
  background: rgba(0,0,255,.1);
}

＆＃13;

<div class="container">
  <div class="left">aaaaaaaa bbbbbbbbbbbbbbbbbbbb</div>
  <div class="right">cccccc ccccc</div>
</div>

＆＃13;

Answer 2

这是 hacky 解决方案：

.container {
  display: flex;
  width: 200px;
  height: 40px;
  margin:10px 0;
  background: pink; 
}

.left {
  height: 20px;
  flex:1;
  position:relative;
}
.left span {
  position:absolute;
  word-wrap: break-word;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.right {
  background: rgba(0,0,255,.1);
  height: 20px;
}

<div class="container">
  <div class="left"><span>xoxoxoxoxoxoxoxoxoxoxoxoxoxoxox</span></div>
  <div class="right">rarararara</div>
</div>

<div class="container" style="width:300px">
  <div class="left"><span>xoxoxoxoxoxoxoxoxoxoxoxoxoxoxox</span></div>
  <div class="right">rarararararar</div>
</div>
<div class="container" style="width:600px">
  <div class="left"><span>xoxoxoxoxoxoxoxoxoxoxoxoxoxoxox</span></div>
  <div class="right">rarararararar</div>
</div>

flexbox：打破长文本，直到兄弟适合容器

2 个答案: