类似于：
Text width not applying in span
使用相同的'span'理念：
<!DOCTYPE html>
<html>
<script>
str='Just some random text that is about to be encrypted';
function go() {
crypt.textContent=str;
}
function code() {
sa=str.split('');
for (i=0;i<sa.length-1;i++) if (Math.random()<0.5) {t=sa[i];sa[i]=sa[i+1];sa[i+1]=t;}
crypt.textContent=sa.join('');
}
</script>
<body onload='go();'>
<span style='background-color:red;width:100pt' id='crypt'></span>
<button onclick='code();'>Code</button>
</body>
</html>
跨度宽度仍然摆动 - 但文本实际上总是相同的长度 - 至少字母是相同的吗？
答案 0 :(得分：2)
span宽度变化的原因是有时两个或更多个空间最终彼此靠近。这会使它们在渲染结果中折叠成一个空格，从而减少字符数量并更改span的宽度。
使用 （不间断空格）而不是空白字符将解决此问题。即使它们中有多个彼此靠近，它们也会被渲染。
要从JavaScript编写 字符，您需要使用相应的转义序列\u00A0。
str='Just some random text that is about to be encrypted'.replace(/ /g, "\u00A0");
另一个（可能更干净的）解决方案是使用CSS在white-space: pre元素上设置span：
<span style="background-color: red; width: 100pt; white-space:pre" id="crypt"></span>