Cant break the text in the Text tag

Question

<text x="216.7265625" y="191.21875" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" style=" -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: Arial; cursor: move; width: 10px;" font-size="12px"><tspan dy="4" style=" -webkit-tap-highlight-color: rgba(0, 0, 0, 0); ">F. Downturn in numbers of different graphic novels being produced.</tspan></text>

I am trying to break the link into two lines. I had tried
, \n, white-space: normal and none of them are working. Need advice.

Possible duplicate of [How to linebreak an svg text within javascript?](http://stackoverflow.com/questions/16701522/how-to-linebreak-an-svg-text-within-javascript) — mplungjan, Jun 15 '16 at 05:57

score 1 · Accepted Answer · edited Jun 15 '16 at 05:46

1

You need to make it a block level element. The code below will work:

<text x="216.7265625" y="191.21875" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" style="display: inline-block;width: -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: Arial; cursor: move; width: 10px;" font-size="12px"><tspan dy="4" style=" -webkit-tap-highlight-color: rgba(0, 0, 0, 0); ">F. Downturn in numbers of different graphic novels being produced.</tspan></text>

edited Jun 15 '16 at 05:46

mplungjan

169,008
28
173
236

answered Jun 15 '16 at 05:45

Karan Batra

106
2

1

That breaks on every word – mplungjan Jun 15 '16 at 05:48
That's because he has provided width 10px to the element. Width can be adjusted as per the requirement. – Karan Batra Jun 15 '16 at 05:49
So you would need to fix that too? – mplungjan Jun 15 '16 at 05:50
That he needs to decide, how much space he can add the the element. Correct me If I am wrong please. mplungjan – Karan Batra Jun 15 '16 at 05:52
http://stackoverflow.com/questions/16701522/how-to-linebreak-an-svg-text-within-javascript – mplungjan Jun 15 '16 at 05:57

score 1 · Answer 2 · edited Jun 15 '16 at 05:58

1

tutorials jenkov.com svg tspan-element

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <text y="20">
        <tspan x="10">tspan line 1</tspan>
        <tspan x="10" dy="15">tspan line 2</tspan>
        <tspan x="10" dy="15">tspan line 3</tspan>
    </text>
</svg>

edited Jun 15 '16 at 05:58

mplungjan

169,008
28
173
236

answered Jun 15 '16 at 05:52

Saika

398
3
14

Closer to home: http://stackoverflow.com/questions/16701522/how-to-linebreak-an-svg-text-within-javascript – mplungjan Jun 15 '16 at 05:59

Cant break the text in the Text tag

2 Answers2