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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
浅谈JavaScript字符集
May 22 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
Angular4 反向代理Details实践
May 30 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
vue 解决provide和inject响应的问题
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中,文件上传
2006/12/06 PHP
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
妇科医生自荐信
2013/11/05 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
七年级作文之秋游
2019/10/21 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
MySQL GTID复制的具体使用
2022/05/20 MySQL