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 13 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
Vue+Django项目部署详解
May 30 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
vue和小程序项目中使用iconfont的方法
May 19 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
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
基于jquery自定义图片热区效果
2012/07/21 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
C语言基础笔试题
2013/04/27 面试题
高中生自我鉴定范文
2013/10/30 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
施工协议书范本
2014/04/22 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
党员个人总结自评
2015/02/14 职场文书
公司开会通知
2015/04/20 职场文书
刑事辩护词范文
2015/05/21 职场文书
孔繁森观后感
2015/06/10 职场文书
学困生转化工作总结
2015/08/13 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
MySQL数据库之存储过程 procedure
2022/06/16 MySQL