小编Mon*_*ato的帖子

我正在写一个徽章式的块。

问题在于^第三个块 ( 1 (Something something))，正如您在代码段中看到的，它溢出到下一行并在右侧留下额外的空间。

我应该怎么做才能摆脱那个空间？

如果它是纯 CSS 并且不涉及 jQuery，那就太好了。

谢谢！

section {
  width: 8rem;
}

div {
  margin-top: 1rem;
}

.outer {
  background: blue;
  display: inline-flex;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
}

<section>
  <div class="outer">
    1
  </div>

  <div class="outer">
    Very very very long Textttttt
  </div>

  <div class="outer">
    1 (Something something)
  </div>

  <div class="outer">
    Test
  </div>
</section>

这是我的组件的代码：

<template>
  <div id="something" class="card">
  </div>
</template>

const height = 200;
const width = 200;

let graph = d3
  .select('#something')
  .append('svg')
    .attr('class', 'chart-container')
    .attr('height', height)
    .attr('width', width);

<style lang="scss" scoped>
.chart-container {
  background-color: aquamarine;
}
</style>

svg 确实应用了类.chart-container，但没有应用样式

但是，当我scoped从 中删除时<style lang="scss">，它就起作用了。

为什么它会这样？