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 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
微信小程序时间控件picker view使用详解
Dec 28 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 GUID生成函数和类
2014/03/10 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python基础练习之用户登录实现代码分享
2017/11/08 Python
Pandas中resample方法详解
2019/07/02 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python实现EM算法实例代码
2020/10/04 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
实习推荐信格式模板
2015/03/27 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
Redis 限流器
2022/05/15 Redis
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers