JavaScript實現文字豎排效果

admin發表於2018-08-07
JavaScript

文字豎排雖然不常用，但是並不是沒有這方面的需求，但現有的CSS屬性支援度都不高或者相容性不好。

下面分享一個用JavaScript實現的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</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">文字豎排雖然不常用，但是並不是沒有這方面的需求，但是現有的CSS屬性支援度都不高</p> 
</body> 
</html>

以上程式碼完美的實現了想要的效果，可以直接套用就可以了，如果感謝興趣可以自行分析一下程式碼。

相關文章