Question

我一直在研究一个与spritz应用程序有类似结果的项目。基本上，它需要一个字符串，将每个单词转换为一个数组，然后一次显示一个输出。问题是我似乎找不到根据单词长度对齐每个单词的方法（参见链接）。

以下是我正在寻找的spritz输出的演示：http://imgur.com/a/UlZ6W

enter image description here

有没有人知道如何根据单词的长度居中输出？

IE：如果数组长度为1个字母，则为中心字母如果数组长度为2 - 4，则居中第二个字母如果数组长度为5 - 7，则居中第三个字母等。

Answer 1

您的问题的一些背景

我相信你会发现要么很难解决这个问题，要么就是要让你的用户非常激动。

单词没有长度，因为字符的大小不一样，甚至字母之间的空格也不同异常当然是等宽字体（并且它们实际上并不是一个例外，它们就像一个）。

要实现您所追求的目标，您需要知道每个字母的精确大小，并且为了获得真正的准确性，需要知道每个字母与其相邻字母相关的精确大小。但那是排版的细节，可能不是你想做的。

如果是我，我会用

标签人为地做，你可以指定其宽度（例如，你的最大字符+ 1像素）。然后，字长将始终等于父元素的某个倍数。

另一种选择是通过HTML5画布将文本渲染为图像，可以使其自动调整该单词，然后将自己具有宽度属性。

需要考虑的解决方案

尝试类似：

<style>
li.char {
    display:inline-block;
    text-align:center;
    width:4px;
}
li.char.center { color:red}
</style>
<body>

...

<div style="text-align:center">
 <ul id="spritztext"> </ul>
</div>
<script>
var my_string = "strings are cool";
var center = ceil( my_string.len() / 2); 
/* rounding up/down is a bad solution to finding the center character, for what it's worth. examine the words 'will' vis 'limb' in a proportional font and you'll see why*/
var count = 0;
$(my_string).each(function() {
   var class = count == center ? "char center" : "char"; 
    count++
    var char_element ="<li class='" + class +"'>" + my_string[count] + "</li>";
    $("#spritztext").append(char_element)
});

TLDR：文字不是图形;你需要一个等宽字体，渲染策略或通过父元素的黑客

Answer 2

一个可能适合你的开始。

http://jsfiddle.net/kimiliini/ap64C/

使用元素测量宽度。计算单词到中间w / wo中心字母的宽度。

例如，有元素：

<span id="tw"></span>

和CSS：

#tw { 
    position: absolute;
    visibility: hidden; 
    white-space: nowrap; 
    font: bold 18px Arial;
}

可以：

// get element
tw = document.getElementById('tw');
// set text
tw.textContent = 'foo';
// get width
tw.offsetWidth;

以此为基础，我们可以将单词分为三组：

属于中心字母左侧的字母。
左边+中心字母。
中心后的信件。

实施例。将单词starting和一个我们想要居中的框放在距离左边110像素的位置。

length = 8
left   = sta
center = r
right  = ting

width_left = 15
width_left + width_center = 19

mid = (19 - 15) / 2

box margin left = 110 - (width_left + mid)

简单，应该是重构代码，示例：

// span's for left, center and right
var tx = {
    L: document.getElementById('txt_L'),
    C: document.getElementById('txt_C'),
    R: document.getElementById('txt_R')
};
// Box to that holds span's, to set margin left on.
var b = document.getElementById('bw');

function width(w) {
    tw.textContent = w;
    return tw.offsetWidth;
}
function middle(w) {
    var n = w.length,
        // Center char calculation. 1=1, 2-5=2, 6-8=3, ...
        c = ~~((n + 1) / 3) + 1,
        z = {};
    z.a = width(w.substr(0, c - 1));
    z.b = width(w.substr(0, c));
    z.c = (z.b - z.a) / 2;
    b.style.marginLeft = ~~(110 - (z.a + z.c)) + 'px';

    tx.L.textContent = w.substr(0, c - 1);
    tx.C.textContent = w.substr(c - 1, 1);
    tx.R.textContent = w.substr(c);
}

Answer 3

一种解决方案可能是将单词分成两部分，并使用表格式的两列布局来显示单词。像这样：

<table style="border-collapse: collapse; width: 200px;"><tr>
  <td style="text-align: right; width: 100px; padding: 0;">wo</td>
  <td style="text-align: left; width: 100px; padding: 0;">rd</td>
</tr></table>

这并不是在一个位置精确对齐字母中心，而是可以将字母的左边缘或右边缘精确对齐。

要优化解决方案，您可能需要按需获取字母/字符宽度（通过创建带有字母内部文本的临时'span'节点，然后获取offsetWidth）。然后调整两个部分的边距以达到目标。

文字按字长对齐

3 个答案: