Question

您好我正在写一个lib。用于创建文本组合，内部定制。 - d3-fusiontext。

我想支持

text-align：Justify

用户说我提供了一个长文本。提到想要渲染的高度和宽度。 lib。包装起来，并提供包装文本的良好视觉效果。它们都是svg文本元素，因此也可以导出。

现在我很想知道浏览器内部如何以合理的方式对齐？任何源/链接/主题开始。任何帮助/指导都非常感谢。

这是事物看起来很好的一个很好的例子。

codepen.io/anon/pen/zxNJKE

P.S：很抱歉没有gh-pages和docs，因为这些东西都在dev下。将更新。

只是一个普遍的好奇心，浏览器如何确定对齐的对齐间距？

Answer 1

SO上还有其他答案，提供了有关如何进行文本换行的信息。

一旦你弄清楚哪些字符/单词适合该行，你可以使用textLength和lengthAdjust属性让SVG拉伸线以适应宽度。

＆＃13;

<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <line x1="200" y1="0" x2="200" y2="300" stroke="red"/>
  <line x1="800" y1="0" x2="800" y2="300" stroke="red"/>
  
  <text x="200" y="100" 
        font-family="Verdana" font-size="55" fill="blue" >
    Hello, out there
  </text>

  <text x="200" y="170" 
        font-family="Verdana" font-size="55" fill="blue"
        textLength="600" lengthAdjust="spacing">
    Hello, out there
  </text>

  <text x="200" y="240" 
        font-family="Verdana" font-size="55" fill="blue"
        textLength="600" lengthAdjust="spacingAndGlyphs">
    Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

＆＃13;

“text-align：justify”如何运作？

1 个答案: