一个等于多少像素等于？

Question

这是我的代码：

<div style="position:absolute;top:300px;width:50px;height:50px;background:red;color:black;word-wrap:break-word;">
        <div contenteditable=true>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            aaaaa
            bbbbbbbbbbb
        </div>
</div>

我想填补Div中的所有空间。

多少像素  ?

Answer 1

您可以创建一个 <div> 包含   并分配一个 id. 。设置字体大小和属性。然后使用以下方式读取当前宽度和高度：

var space=document.getElementById("space");
var height=(space.clientHeight+1)+"px";
var width=(space.clientWidth+1)+"px";

Answer 2

它取决于字体，大小等。像素的空格没有直接方程/数字。

Answer 3

它取决于字体大小，因为   是一个白色空间角色。

Answer 4

没有办法回答这个问题诚实，因为一个空间的大小根据字体大小而变化。

尝试一下，将“ 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>

Answer 5

答案将取决于您使用的字体以及给出的样式。因此，您需要在页面中动态计算它。

使用JavaScript创建在页面上显示的DIV（即左：-4000px;}包含一个字符的DIV。确保此元素具有与您可满足的Div相同的文本样式。该元素的宽度应为太空角色（确保您不包括任何填充或边框等）

我没有尝试过，但这就是我先尝试的。

Answer 6

您可以使用“ EM”而不是“ PX”。首先搜索了有关“ Em”的链接： http://www.xs4all.nl/~sbpoley/webmatters/emex.html

尝试这种构造

<div style="position:absolute;top:300px;width:{count_of_letters}em; height:50px;background:red;color:black;word-wrap:break-word;">
    <div contenteditable=true>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        aaaaa
        bbbbbbbbbbb
    </div>

但是最好忘记这个想法并使用此主题中其他评论中的CSS规则。

Answer 7

“ EM”（1个字符宽度）通常被认为是16 x 16像素。当然，如果一个观众调整了文本大小，那将会改变。

我不确定您要做什么，但是如果您只想在文本上方空空间，则可以将另一个Div（用于文本）放在您的Div中，然后设置“保证金顶：10EM”； （或您想要的许多EM）提供空白。