javascript - "text-align: justify"是如何工作的？

Question

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

我想支持

text-align: Justify

用户说给我提供了一个长文本。提及它想要渲染的高度和宽度。图书馆。将其包裹起来，并通过包裹的文本提供良好的视觉效果。它们都是 svg 文本元素，因此也可以导出。

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

这是一个很好的例子，展示了事情的外观。

codepen.io/anon/pen/zxNJKE

P.S:抱歉没有 gh-pages 和文档，因为这些内容正在开发中。会更新。

只是一般性的好奇浏览器如何确定合理对齐的间距？

Answer 1

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

• Word Wrap in Raphael JS / SVG
• How to either determine SVG text box width, or force line breaks after 'x' characters?

一旦确定了哪些字符/单词适合该行，您可以使用 textLength和 lengthAdjust属性让 SVG 拉伸(stretch)线条以适应宽度。

<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>