时间戳

首页 > 解决方案 > 如何将元素扩展到溢出末尾

html - 如何将元素扩展到溢出末尾

问题描述

我想动态地将元素平铺一个内联容器，所以我使用inline-flex了但它溢出而不是扩展容器。

这是我看到的：

在此处输入图像描述

这就是我想看到的：

在此处输入图像描述

我不能使用常规flex，因为这会添加不需要的换行符。
是否可以扩展溢出的跨度元素？如果没有，是否有 inline-flex 的解决方法可以用来获得类似的结果？（有点跑题了：我如何让这个 flexbox 居中？）

这是一个可以玩的小提琴

body {
  writing-mode: vertical-rl;
}

.radicals {
  font-size: 3.2em;
}

.strokes {
  text-align: center;
  writing-mode: horizontal-tb;
  margin-bottom: -1.5em;
}

.entry {
  font-size: 1em;
  display: grid;
  grid-template-areas: "strokes kanji reading";
  justify-content: start;
}

.kanji {
  font-size: 2em;
  margin-bottom: -0.4em;
}

.variants {
  display: inline-flex;
  max-width: 1em;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  //border: solid 2px blue;
}

.variant {
  width: 1em;
  font-size: 0.42em;
  //border: solid 1px red;
}

.reading {
  grid-area: reading;
}
<body>
  <div id=content>

    <div class="entry">
      <span class="strokes">16</span>
      <span id=劔 class=kanji>【劔<span class=variants>
<span class=variant href="#剣">剣&lt;/span>
      <span class=variant href="#劍">劍&lt;/span>
      <span class=variant href="#劒">劒&lt;/span>
      <span class=variant href="#剱">剱&lt;/span>
      <span class=variant href="#釼">釼&lt;/span>
      </span>】&lt;/span>
      <span class=reading style="grid-area:reading;">
<span>ケン</span> (검)<br />
      <span>つるぎ&lt;/span> <br /></span>
    </div>

    <div class="entry">
      <span class="strokes">5</span>
      <span id=世 class=kanji>【世<span class=variants>
<span class=variant href="#丗">丗&lt;/span>
      <span class=variant href="#卋">卋&lt;/span>
      </span>】&lt;/span>
      <span class=reading style="grid-area:reading;">
<span>セイ・セ・ソウ&lt;/span> (세)<br />
      <span>よ&lt;/span> <br />
      <span>㊔とし・ゆ・ゆき</span></span>
    </div>

    <div class="entry">
      <span class="strokes">4</span>
      <span id=丑 class=kanji>【丑<span class=variants>
</span>】&lt;/span>
      <span class=reading style="">
<span>チュウ&lt;/span> (축･추)<br />
      <span>うし</span> <br />
      <span>㊔ひろ&lt;/span></span>
    </div>

    <div class="entry"><span class="strokes">3</span>
      <span id=万 class=kanji>【万<span class=variants>
<span class=variant href="#萬">萬&lt;/span>
      </span>】&lt;/span>
      <span class=reading style="grid-area:reading;">
<span>マン・バン&lt;/span> (만･묵)<br />
      <span>よろず&lt;/span> <br />
      <span>㊔かず・ま・ゆる</span></span>
    </div>

  </div>
</body>

标签： htmlcssflexbox

解决方案

推荐阅读