当前位置： > 网页制作 > CSS教程 > 文章内容

CSS教程:关于文字溢出问题的研究(2)

http://www.itjxue.com 2015-08-06 00:12 来源:未知 点击次数:

4.也加上浮动效果；

Webjx.Com

运行代码框
<!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 name="generator" content="WebJX editor, www.itjxue.com" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:200px; } </style> </head> <body> <div class="main"> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">两猪两猪两猪</a> <a href="#" style="color:#f00" class="test">↑上面就是多出的猪两个</a> <a href="#" class="test">再谈猪的问题</a> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

5.想想如果将外面的main中的宽度设置去掉后，会发现最后个层并未连续浮动到第三个层后面，而是另起新行排列；

IT教学网

运行代码框
<!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 name="generator" content="WebJX editor, www.itjxue.com" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } </style> </head> <body> <div > <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">两猪两猪两猪</a> <a href="#" style="color:#f00">↑上面就是多出的猪两个</a> <a href="#" class="test">再谈猪的问题</a> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] IT教学网

6.将main中的宽度设定到一定数值时也可以是正常的；

运行代码框
<!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 name="generator" content="WebJX editor, www.itjxue.com" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:500px; } </style> </head> <body> <div class="main"> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">两猪两猪两猪</a> <a href="#" style="color:#f00">↑上面就是多出的猪两个</a> <a href="#" class="test">再谈猪的问题</a> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：CSS教程:用dl dt dd来制作列表

下一篇：学习WEB标准必备的四项技能

CSS教程:关于文字溢出问题的研究(2)

(责任编辑：IT教学网)

相关CSS教程文章

阅读排行

专题教程

推荐CSS教程文章

最新更新CSS教程