CSS实现文字中间截断效果的一种尝试

CSS属性

text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;

能够实现文字溢出时截断,不过只能在文字结尾处。但是像文件名这样的文字,很有可能一组的前面都是相同的,只有最后的一部分是不同的。这时候需要进行文字的中部截断。

而一般实现文字中间截断都是使用:

1、按照字符个数在服务器端直接截断
这样做的缺陷是,文字并不是等宽的,很容易产生长短不一的情况。

2、用js获取文本的长度,不断删除中间的文字
虽然说这种方式最为可行,但是总是感觉不优雅。。而且爬虫爬取的时候没办法获得完整的内容

于是尝试用自己的办法来解决这个问题

首先这个是演示地址,和代码:http://jsbin.com/okopiz

考虑到浏览器默认支持的截断其实效果还不错,为了达到中部截断的效果,可以将文字分成前后两个部分。然后将前面部分的文字设置成溢出隐藏,而后面部分的文字接上即可。
在实际操作中,使用了padding这个属性,在div尾部推出200px的空间用于放置文字的结尾部分。

只需要保证后面文字不超出200px的空间即可。

不过,这里有个问题:
如果将后面文字固定在200px空间内的话,当宽度足够显示整个文字的时候,会导致后面部分文字被推开。
而如果不这么做的话,当文字溢出,会导致后面部分位置不正确。。

一直没有想到好的办法解决这个问题。。。于是只好求助于js了。。这个是一个缺憾吧。。