js 判断文字是否破行
来源:互联网 发布:360浏览器无法连接网络 编辑:程序博客网 时间:2024/05/16 08:42
日前有这样一个需求,本来是想在div里面嵌个span,再看span的长度是否大于父div长度,如果大于,则破行。
但是发现在IE8-IE10的浏览器不行,后来发现
IE8以后,IE对offsetWidth,scrollWidth的属性发生了变化,只表示看到的部分
比如如果一个div display:none的话,那offsetWidth会是0,scrollWidth一样,如果span的父div宽度为100,overflow:hidden,则span里面不管写多少字宽度都不会超过100,
如果css设置了text-overflow:ellipsis;那span里面的字如果很多,那span里面的offsetWidth则会是80,83或81 ,可悲的是IE8,IE9,IE10都不一样。
而在chormal里面
offsetWidth是指理论长度,就是不管看见看不见,都会从理论上算计其长度,如果span里面的字很多,不管有没有隐藏,offsetWidth的值都是一样的。
在jquery里面的width()方法中,如果是IE的话,如果是隐藏的话,他会修改成显示,求出长度,再去隐藏。
但是,如果像我前面说的,父容器被overflow:hidden的话,width()也只能返回可视长度。
所以,如果要判断文字是否破行的话,首先要把容器里面的文字复制出来,放到另一个容器中,再比较两个窗口的长度,如果后者大于前者,刚破行。
代码如下
<div id="a" style="width:100px;border:solid 1px; text-overflow:ellipsis;overflow:hidden;
white-space:nowrap;">枯在在枯厅dsdfffff</div>
<div style="display:none" id="kkk"></div>
<script>
window.onload = function () {
$("#a").width();
$("#kkk").text($("#a").text());
if ($("#kkk").width() >= $("#a").width()) {
$("#a").toggle( function () {
$(this).css("white-space", "normal");
}, function () {
$(this).css("white-space", "nowrap");
});
}
}
</script>
另外,td里面做换行,table一定要设置相关属性才行
- js 判断文字是否破行
- js 判断是否IE
- js判断是否定义
- js 判断是否在线
- JS 判断是否手机号码
- js判断是否是微信
- js 判断是否数字
- JS时间段判断显示文字
- java判断是否输入中文字
- c#判断输入文字是否是数字
- java判断文字中是否包含URL
- 【IsNullUtils】 判断EditText、TextView是否有文字
- PHP 判断文字是否为utf8
- 判断文字是否需要字型组合
- 判断输入的文字是否为空
- html5判断文字是否有下划线
- js:判断是否是空白
- js判断是否为数字
- 双系统centos下问题解决
- 经典排序算法 - 快速排序Quick sort
- php筛选最大最小部分的数组
- Qt - 移动无边框窗体
- C++时间与字符串转换
- js 判断文字是否破行
- 平面设计和网页设计之间的联系
- Java 多线程
- T-SQL中的GROUP BY GROUPING SETS
- Linux
- jsp中的include指令的用法,include文件路径问题,txt文件的编码问题
- lua时间函数
- 虚函数的3种调用
- SensorService architechure’ note