Question

我正在尝试使用css构建布局，其中所有维度都在em中指定。我的印象是，这将允许页面以不同的字体大小/缩放级别显示相同的方式。但是，我注意到随着大小/缩放的变化，文本的换行方式也不同。

例如在this jsfiddle中，文本以我的原生缩放显示在一行上，字体大小为1em，但是以2em的字体大小包装。我希望它能够包装/不包装，因为容器的宽度在em中，因此应该与字体大小成比例增加。

我做错了什么，或者我只是误解了测量对哪些有用？

Answer 1

您理解正确，但font-size定义了字体的HEIGHT，而不是WIDTH，因此在em中定义的容器宽度在不同缩放级别的一行中包含不同数量的字符和字体大小。

我认为如果您将字体更改为单行间距，则可能产生您所追求的效果。值得一试？

Answer 2

我不知道为什么会这样。我使用固定宽度和高度的容器，里面有文字。这样的事情：

<body style="font-size=80%;">
<div style="width: 30em; height: 30em">
text goes in here, and I would very much like it to stay here (not overflow) even when I adjust the font size. For this reason i sued em to size the div and was hoping that this is the intended use of this measure. Alas! this is not the case, as veredesmarald has demonstrated.
</div>
</body>

这很烦人。我检查了div的大小，宽度和高度= 1 em，内部的span只包含一个大写字母M.代码如下：

<div style="font-size:1em; width:1em; height: 1em; background-color:#ddd;">
    <span style="background-color:#eee;">M</span>
</div>
<br>
<div style="font-size:2em; width:1em; height: 1em; background-color:#ddd;">
    <span style="background-color:#eee;">M</span>
</div>
<br>
<div style="font-size:3em; width:1em; height: 1em; background-color:#ddd;">
    <span style="background-color:#eee;">M</span>
</div>
<br>
<div style="font-size:4em; width:1em; height: 1em; background-color:#ddd;">
    <span style="background-color:#eee;">M</span>
</div>

和尺寸（以px为单位）如下：

font em 1 div width 16 div height 16 span width 14
font em 2 div width 32 div height 32 span width 28
font em 3 div width 48 div height 48 span width 43
font em 4 div width 64 div height 64 span width 57

正如您所看到的，div的宽度和高度可以预测。我忽略了跨度的高度，因为它是行高，而不是字体高度。当我计算跨度（即字体）宽度和div的宽度的比率时，它取决于字体大小而变化：

font em：1 span width / div width：0,875
font em：2 span width / div width：0,875
font em：3 span width / div width：0,895833333
font em：4 span width / div width：0,890625

这表明根据字体大小，文本可以放在div中，也可以溢出/换行。这使得在某些情况下很难处理......

您找到了解决此问题的方法吗？我现在唯一能想到的就是让它有时会在下方留下更多空间，以免它溢出。

Answer 3

字体大小为2em

没有“2em的字体大小”这样的东西。 em是当前字体大小的单位，因此该语句是循环的。应该在ems中定义边距和缩进和宽度，而不是字体大小本身。

基于em的布局有问题

3 个答案: