javascript 一个空间等于多少像素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4287917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How many pixels is a space equal to?
提问by zjm1126
This is my code:
这是我的代码：
<div style="position:absolute;top:300px;width:50px;height:50px;background:red;color:black;word-wrap:break-word;">
<div contenteditable=true>
aaaaa
bbbbbbbbbbb
</div>
</div>
I want to fill all of the space in the div.
我想填满 div 中的所有空间。
How many pixels is the ?
是多少像素 ？
采纳答案by bcosca
You can create a <div>containing and assign an id. Set the font size and attributes. Then read the current width and height using:
您可以创建一个<div>包含 并分配一个id. 设置字体大小和属性。然后使用以下方法读取当前的宽度和高度：
var space=document.getElementById("space");
var height=(space.clientHeight+1)+"px";
var width=(space.clientWidth+1)+"px";
回答by Nick Craver
It depends on the font, size, etc. There's no direct equation/number for spaces to pixels.
这取决于字体、大小等。对于像素的空格没有直接的等式/数字。
回答by John Giotta
It's dependent on the font size because is a white-space character.
它取决于字体大小，因为它 是一个空白字符。
回答by KcSchaefer
There is no way to answer this question honesty, as the size of one space changes depending on the font size.
没有办法诚实地回答这个问题，因为一个空格的大小会根据字体大小而变化。
Try this, changing the "30px" to whatever you want.
试试这个，将“30px”更改为您想要的任何值。
<div style="position:absolute;top:300px;width:50px;height:50px;background:red;color:black;word-wrap:break-word;">
<div contenteditable=true style="margin-left: 30px;">
aaaaa
bbbbbbbbbbb
</div>
</div>
回答by edeverett
The answer will depend on the font you are using and the styles it has been given. So you'll need to calculate it dynamically in the page.
答案将取决于您使用的字体及其所提供的样式。所以你需要在页面中动态计算它。
Use Javascript to create an div that is displayed off the page (i.e left:-4000px;} that contains one character. Make sure this element has the same text styling as the your contentEditable div. The width of this element should be the width of the space character (make sure you're not including any padding or borders etc.)
使用 Javascript 创建一个显示在页面外的 div（即 left:-4000px;} 包含一个字符。确保该元素与您的 contentEditable div 具有相同的文本样式。该元素的宽度应为空格字符（确保不包含任何填充或边框等）
I've not tried this, but that's what I'd try first.
我还没有尝试过这个，但这是我首先要尝试的。
回答by werehuman
You may use "em" instead of "px". First googled link about "em": http://www.xs4all.nl/~sbpoley/webmatters/emex.html
您可以使用“em”而不是“px”。关于“em”的第一个谷歌链接：http: //www.xs4all.nl/~sbpoley/webmatters/emex.html
Try such construction
试试这样的构造
<div style="position:absolute;top:300px;width:{count_of_letters}em; height:50px;background:red;color:black;word-wrap:break-word;">
<div contenteditable=true>
aaaaa
bbbbbbbbbbb
</div>
But better to forget this idea and use CSS rules from other comments in this topic.
但最好忘记这个想法并使用本主题中其他评论中的 CSS 规则。
回答by werehuman
An "em" (1 character width) is often considered to be 16 x 16 pixels. Of course, if a viewer resizes text, that would change.
“em”（1 个字符宽度）通常被认为是 16 x 16 像素。当然，如果查看者调整文本大小，情况就会改变。
I'm not sure what you're trying to do, but if you just want empty space above your text, you could put another div (for the text) inside your div, and then set a " margin-top: 10em; " (or however many ems you want) to provide the blank space.
我不确定您要做什么，但如果您只想在文本上方留出空白空间，您可以在 div 中放置另一个 div（用于文本），然后设置一个“ margin-top: 10em; ” （或者你想要多少个em）来提供空白空间。
