Question

我正在开发一个内容容器高度有限的项目，在一些选择的浏览器（主要是Android上的Chrome）上，文本似乎在不同的地方打破了，尽管几乎所有字体属性看起来都相同到目前为止，我已经检查过了：

所有这些都是相同的，包括给定值和计算值。

这通常不是一个大问题，但由于内容容器高度限制，这些差异让我头疼不已。

我已设法使用以下代码在fiddle中复制问题：

HTML

<p>We are not able to sleep or We cannot sleep.</p>

CSS

p {
    font-family: "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
    letter-spacing: 0;
    max-width: 200px;
}

此示例中的文本在大多数浏览器的一行中呈现，但在某些最后一个单词“sleep”中。出现在新的一行。

您可以在以下网址的许多不同浏览器中查看此示例的屏幕截图：

这里有什么我想念的吗？有没有办法确保文本以相同的方式呈现在多个设备和浏览器中？

Answer 1

我担心这里唯一的解决方案是使用width =“XXX”的图片，或告诉客户端完全不可能在每个浏览器上制作相同的网页，除非你使用不光彩的方法就像使用图片而不是文本。

Answer 2

字体呈现的细节因浏览器和平台而异，并且无法在CSS中控制。此外，不同的计算机可能在同一名称下具有（稍微）不同的字体，或者例如完全缺乏Times New Roman（例如，大多数智能手机缺乏它）。

作为一种解决方法，如果特定的行划分至关重要，请考虑将文本编写为预格式化（即将其划分为HTML源中的行，使其显示在显示中）并使用white-space: pre。缺点是某些线可能会撞击甚至越过为元素保留的区域的右边缘。但如果你没有设置背景或边框，这几乎不会引人注意。

Answer 3

我能够通过用最小宽度替换max-width来解决浏览器中的问题，请参阅此http://jsfiddle.net/79j57L8L/4/

p {
font-family:"Times New Roman", serif;
font-size: 11px;
font-style: italic;
min-width: 200px;
}