CSS如何讓文字豎排效果例項程式碼

admin發表於2017-02-23
CSS

文字豎向排列在實際的網頁設計中並不常用，所以這樣的比較成熟的程式碼在網上很少，本章節就簡單介紹一下如何實現此功能，希望能夠給需要的朋友帶來一定的幫助，例項程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery動態提示訊息框效果</title>
<style type="text/css">
ul{
  width:100px;
  height:160px;
  overflow:hidden;
  list-style:none;
}
ul li{
  float:right;
  display:inline;
  margin-left:4px;
  width:14px;
  height:120px;
  font-size:14px;
  word-wrap:break-word;
  word-break:nomal;
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落歡迎您</li>
  <li>每一天都是新的</li>
  <li>只有奮鬥才會有前途</li>
  <li>高手都是從菜鳥而來</li>
</ul>
</body>
</html>

以上程式碼是模擬實現的豎排效果，由於現有的屬性具有很大的相容性問題，所以暫時以上面的方式實現。

誰有更好的方式可以分享一下。

相關文章