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

作者: 李佶澳   转载请保留:原文地址   更新时间:2017/09/04 23:23:50

现象

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;
}

本文原创首发于网站:www.lijiaocn.com

QQ交流群

区块链实践互助QQ群:576555864

Kubernetes实践互助QQ群:947371129

Prometheus实践互助QQ群:952461804

Kong/Envoy实践互助QQ群:952503851

Ansible实践互助QQ群:955105412

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