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 相关文章推荐
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
javascript 用函数实现继承详解
May 28 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
vue实现数字滚动效果
Jun 29 Javascript
关于Vue中$refs的探索浅析
Nov 05 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP反射实际应用示例
2019/04/03 PHP
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python绘图实现显示中文
2019/12/04 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
python空元组在all中返回结果详解
2020/12/15 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
公司管理建议书范文
2014/03/12 职场文书
经典禁毒标语
2014/06/16 职场文书
见习期个人总结
2015/03/05 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
PHP中strval()函数实例用法
2021/06/07 PHP
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers