一个空间等于多少个像素？

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

您可以创建一个包含   的

并分配一个 id。设置字体大小和属性。然后使用以下命令读取当前宽度和高度：

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

Answer 2

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

Answer 3

它取决于字体大小，因为   是空白字符。

Answer 4

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

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

Answer 5

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

试试这个，将“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 6

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

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

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

Answer 7

您可以使用“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>
                   
                   
        aaaaa
        bbbbbbbbbbb
    </div>

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

Answer 8

Unicode 为许多空格字符定义了固定宽度。 此处的下表是 Unicode 规范的摘要 (Unicode 14，第 266 页）：

<表类=“s-表”>
<标题>

代码
角色名称
字符宽度

<正文>

U+0020
空间
取决于字体，通常为 1/4 em，经常调整

U+00A0
不间断空格
作为空格，但经常不调整

U+1680
奥格姆空间标记
未指定；通常不是一个空格而是一个破折号

U+180E
蒙古语元音分隔符
0

U+2000
EN四
1 en (= 1/2 em)

U+2001
EM 四元组
1 em（名义上，字体的高度）

U+2002
EN SPACE（坚果）
1 en (= 1/2 em)

U+2003
EM SPACE（羊肉）
1em

U+2004
三个空格（厚空格）
1/3 em

U+2005
四个空格（中间空格）
1/4 em

U+2006
每 EM 六个空间
1/6 em

U+2007
图形空间
“Tabular width”，数字的宽度

U+2008
标点符号空格
句点“.”的宽度

U+2009
稀疏空间
1/5 em（或有时 1/6 em）

U+200A
头发空间
比薄空间更窄

U+200B
零宽度空间
0

U+202F
狭窄的不间断空间
比 NO-BREAK SPACE（或 SPACE）窄，“通常是薄空间或中间空间的宽度”

U+205F
中等数学空间
4月18日

U+3000
表意空间
表意 (CJK) 字符的宽度。

U+FEFF
零宽度无中断空间
0

不幸的是，公共空间没有定义为具有固定宽度。它不仅取决于字体大小和明确的样式，还取决于缩放级别和系统显示缩放比例等。

然而，0.25em 通常会让您关闭。以像素为单位，它是字体高度的 1/4；但如果您尝试将 em 单位调整为 px 尺寸，则最好使用 calc()，或者仅使用 em。

或者，考虑不需要您知道空间有多宽的样式策略。例如，对于 OP 的“填充 div 中的所有空间”的目标，父 div 的 width 和 height 可以是设置为 max-content，或者子 div 的样式可以设置为 white-space:nowrap。

或者，例如，可以用伪元素替换 Flex 布局中的间隙，例如，可以插入包含带有 white-space: pre 的空格的元素来创建正确大小的间隙：

.explicit-gap { 
  gap: 0.25em; 
}

.implicit-space > :not(:first-child):before {
  content: ' ';
  white-space: pre;
}

div { display: flex; }

/* just some labels, nothing interesting down here */
.explicit-gap:after { content: "(using 'gap')" }
.implicit-space:after { content: "(using ':before')" }
.no-styling:after { content: "(no gap set)" }
.control:after { content: "(actual spaces)" }
div:after { position: absolute; left: 25ex; opacity:.5; }

<div class="explicit-gap">
  <span>Here</span>
  <span>are</span>
  <span>some</span>
  <span>words</span>
</div>

<div class="implicit-space">
  <span>Here</span>
  <span>are</span>
  <span>some</span>
  <span>words</span>
</div>

<div class="no-styling">
  <span>Here</span>
  <span>are</span>
  <span>some</span>
  <span>words</span>
</div>

<div class="control">
  <span>Here are some words</span>
</div>

ETC。