前言:一个小白在写前端代码过程中遇到的各种样式兼容问题记录
超长文本不自动换行超出边框的问题
需求:做一个展示错误日志的页面,相当简单,把后台返回的一大坨日志,合理格式化换行符号后展示在前端。但对于一句没有任何空格的超长文本,前端未自动换行,导致超出边框展示。
![](https://img.haomeiwen.com/i1612658/08ecc3c4c8a8274b.png)
而有空格的长文本,可以在空格处换行,可见前端是有默认换行动作的,但为了保证文本可读性,不会轻易断开连续文本。
解决:添加 word-wrap: break-word; 属性,该属性会先尝试把超长的部分放到下一行展示,如果还是展示不开就强制单词内断句。
缩略图table,点击图片蒙板展示大图时,表格边框透过蒙板展示到顶层,特别难看
需求:在一个table中,某个cell中是一张缩略图,点击后展示大图,此时蒙板挡住后面页面,但样式问题出现了,底层表格外边框透过蒙板展示到顶层了,很难看
![](https://img.haomeiwen.com/i1612658/c8f10b3a3d2547b8.png)
解决:CSS样式层级的问题,在大图展示的div的样式表中添加如下属性即可:
z-index: 999; /*值越大越在顶层*/
配合z-index的使用,要同时配置position属性,absolute、relative或fixed都可以。
空数组居然不空?
js中定义了一个数组 var a=[],在其他代码处会判定这个变量是否为空来做一些出来,然而if(a!=[]) 永远为true,深究了下原因发现,对js的变量机制还是不熟悉。
[] 在js中就相当于new Array(),这是一个新对象给了新的空间,a!=[]实际比较的是两个对象的地址,而非内容,因此当然永远为true。因此要用其他方法判定,比如:
JSON.stringify(a) === '[]'
a.length === 0
+a === 0
但比较保险的还是参考了网上的一个方法:
function isEmptyObject(e) {
var t;
for(t in e) {
return !1;
}
return !0;
}
网友评论