在前端开发中,文章列表算是很常见的了,但是有很多时候,做列表开发也很无奈,比如当某条文章标题很长的时候,而我们的列表因为宽度有限,导致文章标题显示不完整,就像这样:
文章效果
html代码
大家可以看到,列表中的标题都显示的不完整,这样的显示效果并不友好,用户无法知道这个标题是否是完整的,那么这个时候我们就可以给他改进一下,如果标题太长,就给它显示省略号,这样用户就更有兴趣点击。
实现单行内容溢出显示省略号很简单,只需要用 text-overflow:ellipsis 属性即可:
css样式
改善后的效果就是这样:
谢谢你的阅读,如果你有更好的方法或在应用过程中遇到问题可以在评论区提问或者直接私信我,我会定期回复,码农刘小桥与你一起学习,共同进步。