关于text-overflow

经过

最近在帮自己学校的外语系做他们的系网,发现有个小地方要出现一段长文章的一部分,超出部分想着用省略号处理。

想起了text-overflow这个东东,问题是以前没怎么用过这玩意,所以就傻愣愣的直接在一个p{}里写上text-overflow

肯定是不行的,遇到问题就得解决问题呀。立马写个demo来学习。

发现

首先,文本容器一定要是block元素,inline是没用的。然后文本会超出那肯定容器得有宽度,这些是前提。光有这些用text-overflow也是没用滴。发现必须要同时兼具white-space:nowrapoverflow:hidder时才会出现省略号。

text-overflow中还有一个备选值是clip,就是裁剪超出的部分。个人觉得好像跟只有white-space:nowrapoverflow:hidder没啥区别。。如果其实是有区别的,请大神指教!

至于第三个string,就是用别的字符来代替省略号如:overflow:"###" 不过不知道为什么我用chrome测试第三种没用,firefox就可以

对了,这种方法迫使过长文本省略只能应用在单行文本中。多行文本超出部分变省略号地方法目前我想到的就是用::after吧。。待我试试后再写下来。

PS

如果大神们有什么更好的方法或者发现了我有什么做的不好的,望指出

你可能感兴趣的:(关于text-overflow)