CSS文本以字母间距对齐

Question

有没有办法使用CSS自动对齐使用字母间距的单词,每个单词在其行中,到定义的宽度？

例如,"像这样的东西"看起来像这样:

是否有一种非突兀的方式将这种样式应用到我的文本中？我相信纯CSS没有这个选项(至少在3之前没有CSS版本,CSS3似乎有一个text-justify属性,但它还没有得到很好的支持),所以js解决方案也没问题.

Answer 1

这是一个可以做到的脚本.它不漂亮,但也许你可以破解它来满足你的需求.(更新以处理调整大小)

function SplitText(node) {
  var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");

  for (var i = 0; i < text.length; i++) {
    var letter = document.createElement("span");
    letter.style.display = "inline-block";
    letter.style.position = "absolute";
    letter.appendChild(document.createTextNode(text.charAt(i)));
    node.parentNode.insertBefore(letter, node);

    var positionRatio = i / (text.length - 1);
    var textWidth = letter.clientWidth;

    var indent = 100 * positionRatio;
    var offset = -textWidth * positionRatio;
    letter.style.left = indent + "%";
    letter.style.marginLeft = offset + "px";

    //console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);
  }

  node.parentNode.removeChild(node);
}

function Justify() {
  var TEXT_NODE = 3;
  var elem = document.getElementById("character_justify");
  elem = elem.firstChild;

  while (elem) {
    var nextElem = elem.nextSibling;

    if (elem.nodeType == TEXT_NODE)
      SplitText(elem);

    elem = nextElem;
  }
}

Answer 2

仅CSS的解决方案是text-justify: distribute https://www.w3.org/TR/css-text-3/#text-justify，但支持仍然很差。

一个text-align-last: justify在字母之间使用空格并添加空格的小实验。

div{
	display:inline-block;
	text-align: justify;
	text-align-last: justify;
	letter-spacing: -0.1em;
}

<div>
S o m e t h i n g<br>
l i k e<br>
t h i s
</div>