ios以及safari中的pre标签设置overflow后,不显示水平滚动条

作者:李佶澳  更新时间:

  问题    前端    刷新

目录

现象

ios和safari中,为pre标签设置了overflow:auto,标签中的内容折叠换行了,而不是产生水平滚动条。

设置的属性如下:

div.center pre{
	font-family: Inconsolata, Consolas, "DEJA VU SANS MONO", "DROID SANS MONO", Proggy, monospace;
	font-size: 90%;
	border: solid 1px lightgrey;
	background-color: rgba(185, 239, 66, 0.3);
	padding: 5px;
	line-height: 1.3;
	overflow: auto;
}

在firefox、chrome中,当pre标签中的内容超过水平宽度的时候,可以显示水平滚动条,在safari以及ios上不显示。

解决

使用google搜索safari overflow-x not work scroll得到结果中,即使是stackoverflow中给出的各种解决方法,也都不起作用。

后来发现stackoverflow页面中的pre在safari中是可以水平滚动,用开发者工具查看对应的样式,发现只需要添加一个属性即可:

word-wrap: normal;

你现在看到的这个页面中的pre,在ios上就可以水平滚动:

div.center pre{
	font-family: Inconsolata, Consolas, "DEJA VU SANS MONO", "DROID SANS MONO", Proggy, monospace;
	font-size: 90%;
	border: solid 1px lightgrey;
	background-color: rgba(185, 239, 66, 0.3);
	padding: 5px;
	line-height: 1.3;
	word-wrap: normal;
	overflow: auto;
}

关注加微信,一般不闲聊(直接说事)

Copyright @2011-2019 All rights reserved. 转载请添加原文连接,合作请加微信lijiaocn或者发送邮件: [email protected],备注网站合作

友情链接:  微信公众号精选文章  发现知识星球