css文本超出长度用省略号显示

当我们制作列表页的时候，一般都是获取文章标题，然后一行一行的显示。

但是当标题过长的时候，就会造成换行显示。

虽然我们可以使用overflow:hidden将超过宽度的字符隐藏掉。

但是结尾看起来总会让人觉得有点僵硬。

而且也不利于让用户知道后面还有没显示完的字符。

最好的方法，就是将多余的字符用省略号来代替。

今天小编带来的就是，使用css让单行文本超出长度的部分用省略号显示。

以下为主要代码：

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

<style> .overflow{width:220px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;} </style>
<div>
欢迎来到csdn博客,请记住我们的网址blog.csdn.net
</div>
<div class="overflow">
欢迎来到csdn博客,请记住我们的网址blog.csdn.net
</div>

结果

欢迎来到csdn博客,请记住我们的网址blog.csdn.net
欢迎来到csdn博客,请记住我们的网址bl...

以上就是使用css解决文本超出长度用省略号替代的方法，希望对小伙伴们有帮助。

转载于:https://www.cnblogs.com/zhangjiabing/p/10898742.html

2019年5月21号总结相关推荐

2017年6月21号课堂笔记
2017年6月21号星期三多云转雷阵雨空气质量:中度污染~轻度污染内容: JavaScript 原型式面向对象 01基于Object的对象的方式创建对象:02使用字面量赋值方式创建对象 03构 ...
2017年4月21号课堂笔记
2017年4月21号星期五空气质量:良内容:XML,Dom4j解析XML文件,单例一.XML 老师代码: <?xml version="1.0" encoding=& ...
php 计算每年春节日期,动态显示2019年农历春节倒计时—2019年1月21日23时45分
动态显示2019年农历春节倒计时-2019年1月21日23时45分 2019年02月21日 20:15:24阅读数:489 实例实例 html> 春节倒计时 .HotDate{width: 1 ...
java9什么时候公布_Java 9正式版有可能被推迟到9月21号发布
Oracle Java Platform Group首席架构师Mark Reinhold在五月份的一系列专家组电话会议中建议将Java 9的正式发布日期向后延期8周,也就是在9月21号发布(既定的发布 ...
才发现网易相册已于2019年5月8号停止运营，如何导出相册照片：http://photo.163.com/transfer/html/login , 使用相册帐号登录，提供真实姓名、手机号码
网易相册已于2019年5月8号停止运营. 如果您想找回网易相册信息,麻烦您点击这里下载app之后登录邮箱, 在app中点击[我的]页面-[帮助与反馈]进入帮助中心, 点击[博客与相册]-[如何导出相册 ...
JustAuth于2019年7月21日正式喜提码云【GVP 】称号！
JustAuth于2019年7月21日正式喜提码云(gitee.com)最有价值开源项目GVP ( Gitee Most Valuable Project ) 称号! 感谢朋友们的支持! @小凯 @H ...
6月21号大部分网站百度快照回档总结分析
此文纯属马后炮,只是给大家一个思路而已,看过的朋友一笑即可. 6月21号16点左右开始,很多网站的百度快照开始回档(什么是快照回档).今天小熊就来大概分析一下前因后果,不贴图了. 如果还不清楚的朋友可 ...
9月19号-9月21号丰宁坝上草原行 - 营销系统 - 京东内部论坛 - Powered by Discuz!
9月19号-9月21号丰宁坝上草原行 - 营销系统 - 京东内部论坛 - Powered by Discuz! 9月19号-9月21号丰宁坝上草原行 - 营销系统 - 京东内部论坛 - Powered ...
10月21号微软Azure培训的PPT下载
活动主题:Azure Discovery Event 活动时间:2011年10月21日 13:30-17:45 活动地址:微软亚太研发集团总部,北京市海淀区丹棱街5号,1号楼1层MPR会议室以下是 ...

2019年5月21号总结

css文本超出长度用省略号显示

2019年5月21号总结相关推荐

最新文章

热门文章