Change Svg Text to CSS Word Wrapping

Auto line-wrapping in SVG text

Text wrapping is not part of SVG1.1, the currently implemented spec.

In case you are going to use your SVG graphic on the Web, you can embed HTML inside SVG via the <foreignObject/> element. Example:

<svg ...>

<switch>
<foreignObject x="20" y="90" width="150" height="200">
<p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
</foreignObject>

<text x="20" y="20">Your SVG viewer cannot display html.</text>
</switch>

</svg>

If you are targeting a pure SVG renderer without HTML support or want your graphic to be editable using professional vector graphics manipulation software (Adobe Illustrator, Inkscape, ...), this solution will probably not suit you.

change SVG text to css word wrapping

You probably want to use the SVG foreignObject tag, so you would have something like this:

nodeEnter.append("foreignObject")
    .attr("x", function(d) { return d._children ? -8 : -48; }) /*the position of the text (left to right)*/
    .attr("y", 3) /*the position of the text (Up and Down)*/
    .attr("width", your_text_width_variable)
    .attr("height", your_text_height_variable)
    .append("xhtml:body")
    .append("p")
    .text(function(d) { return d.name; });

Here is a gist by Mike Bostock which helped me: https://gist.github.com/1424037

SVG Word Wrap - Show stopper?

Per this document, it appears that tspan can give the illusion of word wrap:

The tspan tag is identical to the text tag but can be nested inside text tags and inside itself. Coupled with the 'dy' attribute this allows the illusion of word wrap in SVG 1.1. Note that 'dy' is relative to the last glyph (character) drawn.

Responsive SVG textpath wrapping dynamic content

This is how I would do it:
I'm putting both the div with the text and the svg in the same parent position:relative. The .text-container have position absolute and lays over the svg element.

Also the .text-container have a width but the height:auto since the content is dynamic.

You will need the size of the .text-container and you'll use this to calculate the new viewBox of the svg element and the new value of the d attribute of the #curve

let txtCont = document.querySelector(".text-container");// get the size of the text containerlet box = txtCont.getBoundingClientRect()
//set the new viewBox of the svg elementcanvas.setAttributeNS(null,"viewBox",`-50 -30 310 ${box.height}`)//set the new d attribute of the curvecurve.setAttributeNS(null,"d", `M0,0 h200 a20,20 0 0 1 20,20 v${box.height  - 100} a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-${box.height - 100} a20,20 0 0 1 20,-20 z`)

#wrap {  height: auto;  width: 300px;  margin: 0;  padding: 0;  position: relative;}.text-container {  box-sizing: border-box;  padding: 30px 50px;  position: absolute;  width: 100%;  height: auto;  top: 0;  left: 0;}#canvas {  border: 1px solid;  margin: 0;}

<div id="wrap">    <svg id="canvas"  viewBox="-50 -30 310 310">          <path width="100%"  id="curve" fill="none" stroke="gold" d="" />        <text font-family="Helvetica" font-size="20" fill="black">            <textPath xlink:href="#curve" startOffset="0%" id="text">Last News</textPath>        <animate xlink:href="#text" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="10s" repeatCount="indefinite"/>        </text>    </svg>
<div class="text-container">  <p>I'm trying to wrap a block of news (which will vary on width & height) with an animated SVG textpath around it. I got this so far</p>  </div></div>

Styling word wrap

Maybe not a solution - but hopefully helpful :)

The idea is simple: Repeat an image at the right side of the code-containing box - in case its okay to put the newline-icon/char at the far right and not the actual break.

You'll have to replace the linear gradient by an image, or an inline-image (data:image[...])

.code {
  width: 200px;
  line-height: 15px;
  background: repeating-linear-gradient(#000, #DDD 1px, #FFF 15px);
  background-size: 15px 30px;
  background-repeat: repeat-y;
  background-position: top right;
  padding-right: 15px;
}

<div class="code">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

---

Related Topics