How can I give fixed width?

Question

I have legend of a chart like this with 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>

this would good if each text is not really long, but if text is long, it make legend(g) unnecessary bigger.

So I want legend (g) to have fixed width, and if text inside it is long, I want it to be wrapped.

How can I achieve this?
I know that I cannot really give style to <g>, so append some elements inside legend to achieve this?

SVG does not support auto wrapping, you'd have to wrap the text yourself by cutting it up into separate elements. — Robert Longson, Feb 02 '17 at 13:58
see also http://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text — Ruskin, Feb 02 '17 at 14:12

score 0 · Answer 1 · answered Feb 02 '17 at 14:35

0

try this:

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

answered Feb 02 '17 at 14:35

Fanyo SILIADIN

802
5
11

score 0 · Answer 2 · answered Feb 02 '17 at 14:38

You can add this css rule to the <text> to add ellipses to really long text.

Just add the class truncate to your elements or drop the class specificity-modifier from the rule below.

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

Alternatively:

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

How can I give fixed width?

2 Answers2