在做网站的过程中，361源码小编很多时候遇到过这样一种情况：一行文字太长，不能分行，必须要在固定宽内截断文字，并且在末尾加上省略号，如下图所示：
我们可以有不少的实现办法，这里361源码给大家介绍最简单的，最常用的一种方法，使用CSS代码来实现文字自动截断并添加省略号。代码如下：
<!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文字截断____cuoxin.com</title><style>body{background-color:#f4f4f4;font-size:12px;}.text-overflow{width:200px;height:100px;border:1px solid red;border-top:4px solid red;padding:10px;overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/white-space:nowrap;/* 文字不换行 */}</style></head><body><div class='text-overflow'>测试一下文字截断效果测试一下文字截断效果测试一下文字截断效果测试一下文字截断效果测试一下文字截断效果测试一下文字截断效果测试一下文字截断效果测试一下文字截断效果</div></body></html>OK，直接复制上面代码运行就可以看到效果了。
新闻热点
疑难解答
