ios 实现文字竖排

UIWebview  读取Html文件通过给UIwebview添加CSS样式来实现文字竖排:::

第一种方法:

只有一行代码  <div style=" writing-mode:tb-rl">是这样吗?看见效果?</div>

tb-rl 是从右往左,上往下竖看,

 

效果图

 

第二种方法: CSS+JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebAirness_Start</title>
<style type="text/css">
span {float:right;width:1em;text-align:center;word-wrap:break-word;background:#ccf;margin:0 5px;}
</style>
<script type="text/javascript">
function shuPai(eid) {
var p = document.getElementById(eid);
var str=p.innerHTML.replace(/<[^>]+>/gi,"");
var arr = str.replace(/(.{1,10})/g,"<span>$1</span>");
p.innerHTML = arr;
}
window.onload = function() {shuPai("test");}
</script>
</head>
<body><p id="test">因为任何人都能做出贡献,维基百科也不断的在更新,因此维基百科与传统的纸本百科全书有一些重要的相异之处。例如,较旧的条目应该会有更完整的内容、更平衡的观点,而较新的条目可能经常会包含明显的错误、非百科全书的内容,或是单纯的破坏。使用者必须注意这一点,以取得有效的信息,并避开那些最近加入且尚未被删除的错误讯息。然而,与纸本的参考资料不同,维基百科经常更新,</p>
</body>
</html>

 

效果ios 实现文字竖排_第1张图片

 

你可能感兴趣的:(ios 实现文字竖排)