我怎样才能给出<g>固定宽度？

Question

我用svg：

传说这样的图表

  <g class="legend">
    <g class="scrollbox">
      <g><text>aaa</text></g>
      <g><text>bbb</text></g>
      <g><text>ccc</text></g>
      <g><text>ddd</text></g>
      <g><text>eee</text></g>
    </g>
  </g>

如果每个文本都不长，这会很好，但如果文本很长，则会使图例（g）变得不必要。

所以我希望图例（g）有固定的宽度，如果里面的文字很长，我希望它被包裹。

我怎样才能做到这一点？
我知道我不能真正给出<g>的样式，所以在图例中附加一些元素来实现这个目标吗？

Answer 1

试试这个：

<style>
text {
    white-space: wrap;
}
</style>

Answer 2

您可以将此css规则添加到<text>，以将省略号添加到真正长文本中。

只需将类truncate添加到元素中，或从下面的规则中删除class specificity-modifier。

text.truncate {
  width: /* Your preferred width */;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

可替换地：

.legend .scrollbox text { /* ... */ }