title: D3.js - How can I add a new line to the text in this Collapsible Tree?
body: <p>I have a Collapsible Tree built by D3.
  Here is the JSFIDDLE:<a href="http://jsfiddle.net/mEyQW/57/">http://jsfiddle.net/mEyQW/57/</a></p>
  
  <p>As you can see, when the nodes fully expended, the text were all overlapped.
  I want to add the new line to replace the space (May have 1 or 2). For example: SDS 123 will become </p>
  
  <p>SDS<br>
  123</p>
  
  <p>I have tried several similar answers found in stack overflow, but still cannot solve my problem.
  Could you please help on this? Presented by a JSFIDDLE will be appreciated!!</p>
  
  <pre><code>  nodeEnter.append("text")
        .attr("x", function(d) { return d.children1 || d._children1 ? -10 : 10; })
        .attr("dy", ".35em")
        .attr("text-anchor", function(d) { return d.children1 || d._children1 ? "end" : "start"; })
        .text(function(d) { return d.NickName ; })
        .style("fill-opacity", 1e-6);
  </code></pre>
  
  <p>Thanks!!</p>