无法为SVG文本设置max-width，求CSS/JS层面解决方法

嘿，我完全懂你的困扰——SVG的<text>元素确实不吃CSS width/max-width那一套，这是因为SVG和HTML的文本布局逻辑压根不是一个路子。你用的那些CSS属性只对HTML块级元素生效，对SVG文本来说等于白写。下面给你两种靠谱的解决办法，不管是用D3处理还是靠HTML嵌入都能搞定：

方法1：用D3自定义换行函数（纯SVG方案） #

这个思路是手动计算文本宽度，把长文本拆成多行，用SVG的<tspan>元素实现换行。你可以写一个复用的wrap函数，传入目标文本元素和最大宽度：

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.4, // 行高，可根据需求调整
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy") || 0),
        tspan = text.text(null).append("tspan").attr("x", text.attr("x")).attr("y", y).attr("dy", dy + "em");
    
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      // 计算当前行的文本长度，超过设定宽度就换行
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", text.attr("x")).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

// 你的原有代码，最后加上wrap调用
var svg = d3.select('body').append('svg')
 .attr('width', 300)
 .attr('height', 200);
var textG = svg.append('g');
var myText = textG.append('text')
 .attr('x', 20)
 .attr('y', 30)
 .attr('class', 'myText')
 .text('This line should be about three to four lines long, but because I am so stupid I cannot make it do what I want it to do. Woe is me.');

// 调用wrap，设置最大宽度为260（因为x是20，svg宽度300，留20的右边距）
wrap(myText, 260);

CSS可以保留基础样式，删掉没用的width相关属性：

.myText {
 font-size: 1.3em;
 fill: gray;
}

这个方法的好处是纯SVG元素，兼容性拉满，适合需要和其他SVG元素交互的场景。

方法2：用<foreignObject>嵌入HTML文本（CSS友好方案） #

如果你更习惯用CSS控制换行，那可以用SVG的<foreignObject>元素，把HTML的<div>嵌进去，这样就能用HTML的所有文本布局属性了：

var svg = d3.select('body').append('svg')
 .attr('width', 300)
 .attr('height', 200);
var textG = svg.append('g');

textG.append('foreignObject')
 .attr('x', 20)
 .attr('y', 20)
 .attr('width', 260) // 这里的width就是文本的最大宽度
 .attr('height', 180)
 .append('xhtml:div')
 .attr('class', 'myText')
 .text('This line should be about three to four lines long, but because I am so stupid I cannot make it do what I want it to do. Woe is me.');

然后CSS就可以正常用max-width、word-wrap这些熟悉的属性了：

.myText {
 font-size: 1.3em;
 color: gray;
 max-width: 100%; /* 这里的100%对应foreignObject的width */
 word-wrap: break-word;
 line-height: 1.4;
}

这个方法的好处是不用写复杂的JS逻辑，直接用熟悉的CSS控制，但要注意<foreignObject>在一些极旧浏览器里兼容性稍差，不过现在大部分现代浏览器都支持得很好。

补充说明：为什么你的原CSS没用？ #

SVG的<text>元素是SVG原生元素，它不遵循HTML的盒模型规则，所以CSS的width、display:block这些属性对它完全不生效，只有fill、font-size这类和SVG文本相关的属性才起作用。

内容的提问来源于stack exchange，提问作者Arash Howaida