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 16 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
js进行表单验证实例分析
Feb 10 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
Vue+Spring Boot简单用户登录(附Demo)
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中date与gmdate的区别及默认时区设置
2014/05/12 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
Vue性能优化的方法
2020/07/30 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python实现猜单词小游戏
2020/05/22 Python
python字符串循环左移
2019/03/08 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
python实现图像全景拼接
2020/03/27 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
2014公司年终工作总结
2014/12/19 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python