如何围绕文本换行范围缩小弹性项目？

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 设置为零，您可以将灵活项目缩小到最小尺寸。所以它会适合文本，但也会强制您的文本换行：

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>

Answer 2

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

浮动文本容器（span）
打断长单词（并在支持断字的浏览器中将它们断字）

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>

如何围绕文本换行范围缩小弹性项目？

How do I shrink a flex item around a text-wrapped span?

html

css

word-wrap

flexbox