div中文字内容溢出常见的解决方法


Posted in Javascript onMarch 16, 2017

由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法:

1:规定文字父容器的宽高,设置超出隐藏:overflo:“hidde”

-------缺点是会经常遇到最后一行文字显示不全的情况,建议在只控制一行文字显示的时候使用

2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

------缺点是火狐浏览器实现效果不好,会截断,页面不是有很多需要隐藏,建议使用

3:用jQuery限制字符字数

$(document).ready(function(){
//限制字符个数
$(“.word_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'…');
}
});
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 #Javascript
原生js更改css样式的两种方式
Mar 15 #Javascript
js清除浏览器缓存的几种方法
Mar 15 #Javascript
从零开始做一个pagination分页组件
Mar 15 #Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 #Javascript
javascript图片预览和上传(兼容IE)
Mar 15 #Javascript
轻松理解JavaScript之AJAX
Mar 15 #Javascript
You might like
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
工商治理实习生的自我评价分享
2014/02/20 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2015年推普周活动总结
2015/03/27 职场文书
防汛通知
2015/04/25 职场文书
会议简报格式范文
2015/07/20 职场文书
小学数学教师研修日志
2015/11/13 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书