如何在文本换行的span周围缩小flex项目？

Question

我甚至不确定这是否可能，我正在尝试弄清楚是否可以将一个围绕文本换行的收缩到flex项中。

这就是我现在所处的位置，如果您查看第二行，我正在尝试消除文本右侧的空格。

body {
  height: 75%;
  margin: 0;
  padding: 0;
}
body > div {
  min-height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 1px solid black;
  width: 225px;
}
body > div > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-right: 1px solid black;
}
body > div > div span {
  font-size: 21px;
}
body > div > div:nth-child(1) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

<div>
  <div><span>Some text regular</span></div>
  <div></div>
</div>
<div>
  <div><span>howdoishrinkthis flexitemtotext</span></div>
  <div></div>
</div>
<div>
  <div><span>Some text regular</span></div>
  <div></div>
</div>

- Blenderer

---

你想要缩小字体大小吗？我不确定我理解你想做什么。 - Ryan Little

我不确定这可以通过纯CSS实现。这个链接可能会对你有所帮助：https://dev59.com/vV8e5IYBdhLWcg3wYJiu - Michael Benjamin

如果你检查"howdoishrinkthis flexitemtotext"中的span元素，你会发现其宽度比flex元素要小。本质上，我想让span元素与左侧文本对齐。 - Blenderer

似乎在文本换行之前，布局就已经计算完成并且不会重新计算。例如，如果您将空格替换为显式的<br/>标签，则可以按预期工作。 - Jesse Kernaghan

Answer 1

通过将flex-basis设置为零，您可以将弹性项缩小到最小尺寸。这样文本就会适应它的大小，但也会强制文本折行：

body > div {
  min-height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 1px solid black;
  width: 225px;
}
body > div > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-right: 1px solid black;
}
body > div > div span {
  font-size: 21px;
}
body > div > div:nth-child(1) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 0;
      -ms-flex: 0 1 0;
          flex: 0 1 0;
}

<div>
  <div><span>Some text regular</span></div>
  <div></div>
</div>
<div>
  <div><span>howdoishrinkthis flexitemtotext</span></div>
  <div></div>
</div>

- tzi

---

这个解决方案似乎只适用于较新版本的Chrome。 - Blenderer

Answer 2

下面的解决方案并不完美，但它确实可以将弹性项目拉到文本上，即使是对于长单词也是如此。它通过以下方式实现：

1. 浮动文本容器（span）
2. 分割长单词（在支持连字的浏览器中连字）

body {
  height: 75%;
  margin: 0;
  padding: 0;
}
body > div {
  min-height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 1px solid black;
  width: 225px;
}
body > div > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-right: 1px solid black;
}
body > div > div span {
  float: left;
  font-size: 21px;
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
body > div > div:nth-child(1) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

<div>
  <div><span>Some text regular</span></div>
  <div></div>
</div>
<div>
  <div><span>howdoishrinkthis flexitemtotextevenlonger and more and more and mroe text</span></div>
  <div></div>
</div>
<div>
  <div><span>Some text regular asdf asdf</span></div>
  <div></div>
</div>

- Patrick Berkeley