如果不在框内，如何将文本拆分到新行上？

Question

我有这个html元素。我想破坏文本，以便Merced显示在下一行。

<text transform="translate(374.14371673354304,603.9583614333004)" 
font-size="10   pt" fill="#787773" text-shadow="#000 0px 0px 0.5px"> 
Oceanview/Merced/Ingleside</text>

我尝试使用\n字符和\r字符，但没有成功。

Answer 1

不是您要尝试做的，而是尝试...

<input type="text" transform="translate(374.14371673354304,603.9583614333004)" 
font-size="10   pt" fill="#787773" text-shadow="#000 0px 0px 0.5px" />
<p>Oceanview</p>
<p>Merced</p>
<p>Ingleside</p>

Answer 2

在SVG工程图中，您可以在<br>内使用<text>来创建换行符：

<svg width="100" height="100"><text y="50">Example<br>New Line</text></svg>

您可以使用CSS line-height和margin来控制段落大小。