Word包装不同的firefox，IE，Chrome，移动浏览器

Question

我的文字背景图片有固定的宽度和高度。我希望文本是固定数量的行（3）。文本在不同的浏览器中包含不同的内容，有时会插入一条额外的行，使文本超出背景图像的边界。这意味着我必须在文本中添加/删除单词，并不断检查每个浏览器中的渲染，看它是否是相同的行数。

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

建议的做法是什么？我希望容器中的文本长度不超过3行，所以我也可以修复容器的高度。

Answer 1

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

请注意，不仅每个浏览器中字符的宽度会有所不同，导致不同的包装，但浏览器也会在不同的高度显示文本 lines ，因此它可以是你的元素不能包含三行。

如果您别无选择，请考虑在固定大小的元素上使用overflow: hidden，但这很可能导致剪切字母和/或单词。

---

编辑评论：

我认为浏览器之间的可用空间不会变化。如果您使用相对单位（em，%），则可能会出现最大一个像素的舍入差异。但是，您使用的像素在所有当前浏览器中都应该相同（在标准模式下）。

无论如何我不是说你应该限制你想要显示的文本数量，只是给文本一些空间来“呼吸”并且不要给元素一个固定的高度（以像素为单位）。代替：

• 设置line-height（例如1.25）和min-height三倍的金额（此处为3.75em）。
• 使用您的最佳估算值将要放入的文字限制为三行。
• 添加一些缩短文本的JavaScript，以防它碰巧超过三行。
• 调整您的布局（包括该元素的灵活背景），因此它可以承受由于不同浏览器（更重要的是用户首选）字体大小和的几个像素差异在您很少估计文本长度并且JavaScript不可用的情况下，很少有其他文本。

Answer 2

确保使用良好的CSS重置，因为大多数浏览器对各种标签都有不同的默认值。假设你的重置是好的，你可以使用浏览器特定的CSS来解决渲染的差异。