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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
javascript简易画板开发
Apr 12 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
PHP递归算法的简单实例
2019/02/28 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
js实现秒表计时器
2019/12/16 Javascript
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
简历的自荐信
2013/12/19 职场文书
安全施工标语
2014/06/07 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
道歉的话怎么说
2015/05/12 职场文书
学校少先队工作总结
2015/08/12 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技