欢迎来到Java学习网!
设为首页 | 加入收藏
当前位置: 首页 > Java语言 > CSS教程 >

不管是做网站,还是改模版的时候,难免会遇到这样的问题:某一行的字符溢出了,这样不仅会“撑开”已经设计好的模块,还可能会覆盖第二行的字符,很影响网站的美观及可读性。

而一般这些字符的显示格式都是由CSS来控制的,如今您只需将代码稍微改一下就能将溢出的文字显示为“…”的形式。

必须需要的CSS属性及定义有:

text-overflow:ellipsis;/*当文本溢出时显示…此时还必须定义:
强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)*/
white-space:nowrap;/*表示文本不会换行*/
overflow:hidden;/*表示溢出的内容会被隐藏*/

完整代码如下:

<!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" />
<title>CSS实现超过特定长度显示省略号的方法</title>
<style type="text/css">
li {
width:200px;/*宽度,超过即会溢出*/
line-height:25px;/*设置行间距*/
text-overflow:ellipsis;/*当文本溢出时显示…此时还必须定义:
强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)*/
white-space:nowrap;/*表示文本不会换行*/
overflow:hidden;/*表示溢出的内容会被隐藏*/
}
</style>
</head>
<body>
<ul>
<li>Java中文网</li>
<li>
<a title="Java中文网,html教程,SEO,Java框架,数据库教程 SEO Java编程"
target="_blank" href="http://www.javaweb.cc">
Java中文网,html教程,SEO,Java框架,数据库教程 SEO java核心编程</a></li>
</ul>
</body>
</html>

 

    相关教程
    推荐内容