如何围绕文本包装的跨度缩小弹性项目？

Question

我甚至不确定这是否可行，我正在试图弄清楚我是否可以在文本包裹的跨度周围缩小弹性项目。

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

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>

Answer 1

通过将flex-basis设置为零，您可以将灵活项目缩小到最小尺寸。 所以它适合文本，但它也会强制你的文本换行：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>