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>的{{1}}并分配 。设置字体大小和属性。然后使用以下方法读取当前的宽度和高度：

id

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（即left：-4000px;}，其中包含一个字符。确保此元素具有与contentEditable div相同的文本样式。此元素的宽度应为空格字符的宽度（确保您不包括任何填充或边框等）。

我没试过这个，但那是我先尝试的。

Answer 6

您可以使用“em”代替“px”。关于“em”的第一个Google搜索链接：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（用于文本），然后设置一个“margin-top： 10em;“（或者你想要的许多ems）提供空白区域。

一个空格等于多少像素？

7 个答案: