关于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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容