文本按字长对齐
我一直在致力于一个项目，有一个类似的结果与spritz应用程序。基本上，它需要一个字符串，将每个单词转换为一个数组，然后每次只显示一个输出。问题是，我似乎找不到一种方法来根据单词长度对齐每个单词(参见链接)。
下面是我正在寻找的spritz输出的演示：http://imgur.com/a/UlZ6W
有谁知道如何根据一个单词的长度来对输出进行居中呢？
如果数组长度是一个字母，中心字母如果数组长度是2-4，中间第二个字母如果数组长度是5-7，中间是第三个字母等等。
回答 3
Stack Overflow用户
发布于 2014-03-26 03:43:25
一个可能对你有用的开始。
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);
}Stack Overflow用户
发布于 2014-03-26 02:11:04
一些关于您的问题的背景
我相信你会发现这要么是很难解决的，要么就是要让你的用户戏剧性地通过铁路。
单词没有长度，因为字符的大小不一样，甚至字母之间的空格也是不同的。当然，单字字体是例外(它们并不是真正的例外，它们的行为就像一个例外)。
为了达到你想要的结果，你需要知道每个字母的精确大小，为了真正的准确，你需要知道每个字母相对于它相邻的字母的精确大小。但这是排版的细节，而且可能不是你想做的。
如果是我，我会人为地用
- 标签，您可以指定其宽度(例如，最大字符+1 px)。那么单词长度将始终等同于父元素的某个倍数。 另一种选择是通过HTML5画布将文本呈现为图像，该画布可以自动填充单词，然后具有一个宽度属性。 --考虑的解决方案 试一试：.
Stack Overflow用户
发布于 2014-03-26 02:35:29
一种解决方案可以将单词分成两部分，并使用类似于表的两列布局来显示单词。如下所示：
<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)。然后调整两个部分的边距，以达到精确的目标。
https://stackoverflow.com/questions/22650128
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号