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 HashTable
Jan 22 Javascript
js 小贴士一星期合集
Apr 07 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
JavaScript Blob对象原理及用法详解
Oct 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防止sql注入代码实例
2013/12/18 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
python基础教程之常用运算符
2014/08/29 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
树莓派实现移动拍照
2019/06/22 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python解释器spython使用及原理解析
2019/08/24 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
解决Python二维数组赋值问题
2019/11/28 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
python中的unittest框架实例详解
2021/02/05 Python
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
碧霞祠导游词
2015/02/09 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
优质护理心得体会
2016/01/22 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript