CSS实现文字竖排效果
http://www.flypeng.com win10系统 发布时间:2015-08-29 11:42 来源:鹏鹏电脑知识网 浏览:加载中
  CSS实现文字竖排效果有两种方法,建议使用模拟方法实现。

  一、使用writing-mode属性

  语法:writing-mode:lr-tb或writing-mode:tb-rl

  参数:
  1、lr-tb:从左向右,从上往下
  2、tb-rl:从上往下,从右向左

  代码:
p{width:100px;height:80px;writing-mode:tb-rl;}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style type="text/css">
p{width:100px;height:80px;writing-mode:tb-rl;}</style>
<title>无标题文档</title>
</head>
<body>
<p>鹏鹏电脑知识网</p>
</body>
</html>
 


  运行代码发现,IE显示正常,火狐却不行,所以不建议使用writing-mode属性,下面使用模拟方法实现。

  二、模拟文字竖排

  代码:
ul{width:100px;height:80px;overflow:hidden;list-style:none;}
ul li{float:right;display:inline;margin-left:4px;width:14px;height:100px;font-size:14px;word-wrap:break-word;word-break:nomal;}


  此方法让li右浮动,设置li宽度和字宽度一样都是14px,这样就自动换行了。另外,“word-wrap:break-word;word-break:nomal;”这句实现标点自动换行(连续字符自动换行)。

  示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style type="text/css">
ul{width:100px;height:80px;overflow:hidden;list-style:none;}\nul li{float:right;display:inline;margin-left:4px;width:14px;height:100px;font-size:14px;word-wrap:break-word;word-break:nomal;}</style>
<title>鹏鹏电脑知识网www.flypeng.com</title>
</head>
<body>
<ul>
  <li>鹏鹏电脑知识网</li>
  <li>鹏鹏电脑知识网</li>
  <li>鹏鹏电脑知识网</li>
  <li>鹏鹏电脑知识网</li>
  </ul>
</body>
</html>
 

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!