10

这是我的代码：

<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 中的所有空间。

是多少像素&nbsp;？

4

7 回答 7

7

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

var space=document.getElementById("space");
var height=(space.clientHeight+1)+"px";
var width=(space.clientWidth+1)+"px";
于 2010-11-26T19:10:33.927 回答
2

这取决于字体、大小等。空间到像素没有直接的等式/数字。

于 2010-11-26T19:03:43.533 回答
2

它取决于字体大小，因为&nbsp;它是一个空白字符。

于 2010-11-26T19:03:53.057 回答
1

“em”（1 个字符宽度）通常被认为是 16 x 16 像素。当然，如果查看者调整文本大小，情况就会改变。

我不确定您要做什么，但是如果您只想在文本上方留出空白空间，则可以在 div 中放置另一个 div（用于文本），然后设置一个“ margin-top: 10em; ” （或任何你想要的 ems）来提供空白空间。

于 2010-11-27T00:38:36.613 回答
0

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

试试这个，把“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>
于 2010-11-26T19:05:30.477 回答
0

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

使用 Javascript 创建一个显示在页面外的 div（即 left:-4000px;} 包含一个字符。确保此元素与您的 contentEditable div 具有相同的文本样式。此元素的宽度应为空格字符（确保不包括任何填充或边框等）

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

于 2010-11-26T19:10:33.033 回答
0

您可以使用“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 规则。

于 2010-11-26T19:10:53.437 回答