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 相关文章推荐
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
javascript中this用法实例详解
Apr 06 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
react build 后打包发布总结
Aug 24 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
Java 生成随机字符的示例代码
Jan 13 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中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
layer 刷新某个页面的实现方法
2019/09/05 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python解析xml文件操作实例
2014/10/05 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
python如何将两个txt文件内容合并
2019/10/18 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
中学生演讲稿
2014/04/26 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
物业工程部岗位职责
2015/02/11 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA