我正在开发一个内容容器高度有限的项目,在一些选择的浏览器(主要是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”中。出现在新的一行。
您可以在以下网址的许多不同浏览器中查看此示例的屏幕截图:
http://www.browserstack.com/screenshots/cf75bb4fa9a22db2e660a0073698be86b55becb6
这里有什么我想念的吗?有没有办法确保文本以相同的方式呈现在多个设备和浏览器中?
答案 0 :(得分:1)
我担心这里唯一的解决方案是使用width =“XXX”的图片,或告诉客户端完全不可能在每个浏览器上制作相同的网页,除非你使用不光彩的方法就像使用图片而不是文本。
答案 1 :(得分:1)
字体呈现的细节因浏览器和平台而异,并且无法在CSS中控制。此外,不同的计算机可能在同一名称下具有(稍微)不同的字体,或者例如完全缺乏Times New Roman(例如,大多数智能手机缺乏它)。
作为一种解决方法,如果特定的行划分至关重要,请考虑将文本编写为预格式化(即将其划分为HTML源中的行,使其显示在显示中)并使用white-space: pre
。缺点是某些线可能会撞击甚至越过为元素保留的区域的右边缘。但如果你没有设置背景或边框,这几乎不会引人注意。
答案 2 :(得分:0)
我能够通过用最小宽度替换max-width来解决浏览器中的问题,请参阅此http://jsfiddle.net/79j57L8L/4/
p {
font-family:"Times New Roman", serif;
font-size: 11px;
font-style: italic;
min-width: 200px;
}