CODEWITHSUNDEEP
htmlcsssvgtextoverflow
Edson
Edson

Reputation: 275

SVG text element breaking out of parent width

So I set the width of my SVG element to 100% and the width of the last text element that I have in there exceeds the width of the SVG element which is its parent.

I've tried using word-wrap and setting a max-width to the text element to no avail.

Basically, I want the text element to not break out of the parent SVG element like it's currently doing, and for the words to wrap when they reach the edge of that parent element's width.

Also, I don't want to just move the text element over to the left, I have it where it's at purposefully. 

<svg height="1000" width="100%">
        <circle cx="50%" cy="50" r=40 stroke="black" stroke-width="2" fill="white"/>
        <text x="49.8%" y="50" font-family="sans-serif" font-size="20px" text-anchor="middle" fill="black" dy=".38em">1939</text>
        <line x1="50%" y1="90" x2="50%" y2="950" style="stroke:black;stroke-width:2"/>
        <text id="first-life-block" x="50%" y="150" font-family="sans-serif" font-size="20px" fill="black" style="word-wrap: normal;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</text>
</svg>

Here's a screenshot of the problem in debugger mode

enter image description here

Here's the link to my Codepen dubugger page: http://s.codepen.io/edsonmendieta/debug/jqjRry

Help is greatly appreciated :)

Upvotes: 0

Views: 1446

Answers (1)

Matheus Avellar
Matheus Avellar

Reputation: 1515

SVG 1.1 doesn't support wrapping of text.

You'd have to manually split it with JavaScript into separate elements or put the text in a <foreignObject> and let it wrap as HTML text.

by Robert Longson

Also check this answer to "Auto line-wrapping in SVG text" and this JSFiddle with a (long) JavaScript workaround.

Upvotes: 1

Related Questions