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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
Javascript实现秒表倒计时功能
Nov 17 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
获取body标签的两种方法
2011/10/13 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
2016/03/31 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
python提取页面内url列表的方法
2015/05/25 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
wxPython实现绘图小例子
2019/11/19 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
企业统计员岗位职责
2013/12/13 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
应用英语专业自荐信
2014/01/26 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
浅析NIO系列之TCP
2021/06/15 Java/Android
python简单验证码识别的实现过程
2021/06/20 Python