Javascript 使用css/js强制div的宽度为X个字符？
我正在处理一个接收大字符串的页面，500*500个字符（最初是所有空格，Javascript 使用css/js强制div的宽度为X个字符？,javascript,css,Javascript,Css,我正在处理一个接收大字符串的页面，500*500个字符（最初是所有空格，'）。然后，我使用单空格字体将其渲染为，宽度和高度设置为500ch let text=”“； 让char=''； 对于（变量i=0；i
'let text=”“；
让char=''；
对于（变量i=0；i<500*500；i++）{
如果（！（i%500））{
char='|'
}
文本+=字符；
char=''；
}
document.getElementById（'text'）。innerHTML=text
：根目录{
--宽度：500厘米；
}
身体{
背景色：#111111；
}
div{
位置：绝对位置；
左：0；
排名：0；
填充：无；
字体系列：“Lucida控制台”、“Courier New”、monospace；
字号:14 ;；
保证金：无；
宽度：var（--pwidth）；
颜色：#EEEEEE；
调整大小：无；
显示：块；
空白：间断空间；
溢出包装：任何地方；
边界：无；
}
当作为SO代码段运行时，问题显然不会发生
因此，我怀疑在别处运行的代码没有正确设置Doctype。因此，代码片段往往会自动添加这样的“缺失位”
我已经在Windows10上的Chrome/Edge/Firefox上运行了以下代码，所有这些代码都在左侧给出了As的“垂直直线”，即预期结果
然而，如果我删除
铬和边缘布局，主要是对角线，两个奇怪的“光点”垂直在彼此上方。我怀疑在这些情况下，你会得到一些加法舍入错误，但我无法证明这一点
在StackOverflow环境中，将添加一个doctype，这样您就不会看到问题
下面是在SO环境外正常运行的代码。请注意，原始给定代码有几个错误（例如，对于填充或边距而言，“无”不是OK值），但这些错误不会影响最终结果
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--pwidth: 500ch;
--pheight: 500ch;
}
body {
background-color: #111111;
top: 0;
padding: 0;
font-family: Courier, monospace;
font-size: 14;
margin: 0;
width: var(--pwidth);
height: var(--pheight);
height: auto;
resize: none;
display: block;
white-space: break-spaces;
overflow-wrap: anywhere;
border: none;
}
#text {
background: pink;
}
</style>
</head>
<body>
<div id="text"></div>
<script>
const textEl = document.querySelector('#text');
let str = '';
for (let i = 0; i< 500; i++) { str += 'A'; for (j = 0; j<499 ; j++) {str +=' '; }}
textEl.innerHTML = str;
</script>
</body>
</html>
：根{
--宽度：500厘米；
--pheight:500ch；
}
身体{
背景色：#111111；
排名：0；
填充：0；
字体系列：Courier、monospace；
字号:14 ;；
保证金：0；
宽度：var（--pwidth）；
高度：var（--pheight）；
高度：自动；
调整大小：无；
显示：块；
空白：间断空间；
溢出包装：任何地方；
边界：无；
}
#正文{
背景：粉红色；
}
const textEl=document.querySelector（“#text”）；
设str=''；
for（让i=0；i<500；i++）{str+='A'；for（j=0；j欢迎使用堆栈溢出！请使用演示问题的示例更新您的问题，最好是使用堆栈片段运行的问题（《代码》[]
工具栏按钮）我已经为您做了第一件事，将您在问题中遇到的内容放入堆栈片段中，但是缺少的部分——HTML——很重要。除了浏览器放入的内容之外，还有其他CSS设置吗？还有，定义高度有什么原因吗？@T.J.Crowder我添加了html。@T.J.Crowder我想你把它分成500个div是正确的。我计划这样做，因为在大多数浏览器（除了firefox）中，以250000个字符的打字速度更新innerhtml似乎滞后了。谢谢你提供的所有信息！@T.J.Crowder我想你说的不是问题的答案。这很有帮助，但最好是通过链接或编辑发表评论（因为非网站链接并不好）。嗨，我不确定如何将所有这些都写进评论中-我该怎么做？如上所述：“…但最好是以带有链接甚至编辑的评论形式发布（因为非现场链接并不好）"啊，我没有设置链接，因为人们往往会为此而绞尽脑汁。我对编辑这个问题没有信心——它会显示什么，一些有用的东西不再是一个问题了？编辑别人的作品也是一个相当大的问题——如何不让他们感到不安？在这种情况下，我也会添加一个“适当的”片段他把问题解决了。我想我会坚持把这些东西放在回答中，特别是因为（我怀疑，如前所述）缺少doctype可能是问题所在。能够在注释中包含代码会很好，但要意识到这是不可能的。坦率地说，这是一个非常尴尬的情况，幸运的是它不会出现太多。请不要发布非答案答案。FWIW，我通常会发布一条注释，其中包含指向pastbin或JSFIDLE.Comments之类的链接是短暂的，评论（和链接）的目的是从OP那里获得反馈，因此它们是转瞬即逝的，内容在场外也不是那么糟糕（而在场外隐藏你的问题或答案是非常不好的）。我从来没有为此受到过批评。（现在，我是一个很有代表性的用户，但是有很多人在其他事情上对我指手画脚……：-D）