Css Word包装不同的firefox、IE、chrome和移动浏览器

我有一个固定宽度和高度的背景图像文本。我希望文本是固定行数（3）。文本在不同浏览器中的包装方式不同，有时会插入一条额外的线，使文本越过背景图像的边界。这意味着我必须从文本中添加/删除单词，并不断检查每个浏览器中的渲染，以确保其行数相同

我猜要么是浏览器正在舍入宽度/边距/填充，以使容器的宽度不同，要么是文本在每个浏览器中呈现略有不同（宽度或多或少）

---

这方面的建议做法是什么？我希望容器中的文本长度不超过3行，因此我最好固定容器的高度

确保您使用了良好的CSS重置，因为大多数浏览器对各种标记都有不同的默认设置。假设重置良好，您可以使用特定于浏览器的CSS来解释渲染中的差异。

建议不要这样做。尝试重新设计，使背景图像不需要固定高度，文本不需要仅限于三行。如果这是老板/客户强加给您的某种要求，您需要与他们交谈并解释，这不是HTML/CSS中可以或应该做的事情

请记住，在每个浏览器中，不仅字符的宽度会不同，从而导致不同的换行，而且浏览器还会以不同的高度显示文本行，因此元素不能包含三行

如果您别无选择，请考虑在固定大小的元素上使用<代码>溢出：隐藏< /代码>，但是这很可能会导致截断字母和/或单词。

---

编辑重新评论：

我认为可用空间不会因浏览器而异。如果您使用的是相对单位（

em

，

%

），那么可能会存在最大一个像素的舍入差异。但是，您使用的是像素，在所有当前浏览器中（在标准模式下）应该是相同的

无论如何，我不是说你应该限制你想要显示的文本的数量，只是给文本一些空间来“呼吸”，而不是给元素一个固定的像素高度。相反：

• 将

  行高

  （例如

  1.25

  ）和

  最小高度

  设置为三倍于该量（此处

  3.75em

  ）
• 使用您的最佳估计值，将您要放在其中的文本限制为三行
• 添加一些缩短文本的JavaScript，以防文本超过三行
• 调整您的布局（包括该元素的灵活背景），使其能够承受由于不同浏览器（更重要的是用户的首选浏览器）而产生的几个像素差异字体大小和可以在额外的一行文本中存活下来，只是在您错误估计文本长度并且JavaScript不可用的情况下

---

即使是最好的重置样式表也无法解释不同的字体或覆盖字体大小的用户首选项。然而，一个好的设计可以也应该考虑到这一点。客户/老板通常不关心好的设计，所以我们在给定的参数范围内进行操作，无论这是否正确。当文本转到4行时，你不需要使用javascript来缩短文本吗？我已经看到在不同的浏览器中字符的宽度是不同的。此外，我认为即使使用相同的填充、边距和宽度，div中的可用空间也会因浏览器而异。无论如何，我需要使背景的高度固定，这样它就不会占用折叠上方太多的空间。文本覆盖在背景上，提供类似twitter的小更新。所以，有理由限制为3行和一定的高度。@EDIT，似乎是一个很好的实用建议。第一个选项是检查每个浏览器如何呈现文本。然后使用Javascript和灵活的后台元素对此进行备份。我只是想看看我是否遗漏了一些可以轻松解决这个问题的东西。看起来有固定数量的文本行和固定高度的背景图像是一个常见的要求。