I need a help on generating line break in html.

Javascript

var x = "jun";
var y = "2015";

var calculate= x + "<br>" + y;

Html returns like below

<div>jan <br> 2015</div>

expected result: i need a line break in html but should not render <br> tag.

Update: what i want is "jan" in first line and next line "2015"

I am using these values in c3 chart x values.

JSFIDDLE

Thanks in Advance.

I need a help on generating line break in html.

Javascript

var x = "jun";
var y = "2015";

var calculate= x + "<br>" + y;

Html returns like below

<div>jan <br> 2015</div>

expected result: i need a line break in html but should not render <br> tag.

Update: what i want is "jan" in first line and next line "2015"

I am using these values in c3 chart x values.

JSFIDDLE

Thanks in Advance.

• javascript
• html
• c3.js

• 2 That doesn't work. You can try it in the jsFiddle he provided. – Cubicle.Jockey Commented Dec 4, 2015 at 6:26
• 2 They are using textContent instead of innerHTML and even if there are dupes, the solutions don't seem to work anymore. So I'd say you're stuck. – Kaiido Commented Dec 4, 2015 at 6:26
• 1 I'm working on it but I guess the best solution would be to render an other <tspan> just below, by hand... – Kaiido Commented Dec 4, 2015 at 6:43
• 1 stackoverflow./questions/16701522/… This answer suggests that the only way would be to create separate tspan, so you probably have to amend c3 source. – Krystian Laskowski Commented Dec 4, 2015 at 6:54
• 2 Here is a tweak, you may not like it : jsfiddle/k9Dbf/607 but it works – Kaiido Commented Dec 4, 2015 at 7:03

4 Answers 4

Your question statement was a bit unprecise : You are using C3.js which will produce svg element.

So the markup returned was actually <tspan dx="0" dy=".71em" x="0">0&lt;br&gt;2014</tspan>.

C3 will use the textContent property of the tspan to append the text content returned by your function.
As already said in other questions, you can't add a line break into <tspan> elements.

So the solution is effectively to create a new tspan just under the other one, in the same <text> element.

Unfortunately, there is no way to get these precise elements except by looping through all others tspans, so this may sounds like a real hack but here is a script that will do what you want...

// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};

var chart = c3.generate({
    data: {
        json: [{
            date: '2014-01-01',
            upload: 200,
            download: 200,
            total: 400
        }, {
            date: '2014-01-02',
            upload: 100,
            download: 300,
            total: 400
        }, {
            date: '2014-02-01',
            upload: 300,
            download: 200,
            total: 500
        }, {
            date: '2014-02-02',
            upload: 400,
            download: 100,
            total: 500
        }],
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.getMonth() + '\n' + x.getFullYear();
                      
                    }
                }
            }
        }
    }
});
// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};

<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit./masayuki0812/c3/master/c3.js"></script>
<link href="https://rawgit./masayuki0812/c3/master/c3.css" rel="stylesheet">
<div id="chart"></div>

You need to create new <tspan> for each new line. Reason is that <tspan> is usually found inside <text> element. Which has certain coordinates. You cannot go "against" those coordinates.

The only thing you can do is create another <tspan> with different set of coordinates and position it as you like.

Because SVG Text Elements are rendered using the same rendering methods as the rest of the SVG Graphical Elements, the same coordinate system, transformations, ... etc also apply.

The SVG Text Element renders the first character at the initial current text position.

This position is defined by the 'x' and 'y' attributes of the SVG Text Element.

Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element.

Perhaps that's what you need:

var calculate= '<pre>' + x + '\n' + y + '</pre>';

You have to put the whole thing in pre-tags that the \n is interpreted as a line break.

About: http://www.sitepoint./everything-need-know-html-pre-element/

Demo on CodePen: http://codepen.io/mizech/pen/gPOrEz

i have tried following code in abc.html and it's working.please try.

    <!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<script>
var x = "jun";
var y = "2015";
document.getElementById("demo").innerHTML =x+"<br>"+y;
</script>
</body>
</html>