css常用技巧集合

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yanyuji/p/6692606.html

文章标签：

#javascript #ViewUI

1 不想让按钮touch时有蓝色的边框或半透明灰色遮罩（根据系统而定）

/*解决方式一*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
/*解决方式二 html中加上*/
<meta name="msapplication-tap-highlight" content="no">

2 清除img标签图片下方出现的几像素空白间隙，产生原因是img的vertical-align属性默认为baseline（元素放置在父元素的基线上）

/*解决方式一*/
img{
    vertical-align: top;
}
/*解决方式二*/        
img{
    display: block;
}

3 单行文本溢出则显示省略号

/*文本id为txt，块级，有宽度*/
#txt{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

4 多行文本溢出显示省略号，仅能在webkit内核的浏览器中使用，如果想普遍适用，就可以通过js获取容器高度，超出就删除文本，最后替换成...

/* 方式一
* 需定义好容器高度
*/
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;/*第几行显示省略号*/
    overflow: hidden;
}

js多行文本溢出显示省略号，文本在类main的p标签中，贴出body里面的代码

/* 方式二 jQuery
*/
/*html部分*/
<div class="main">
    <p>测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>
/*css部分*/
.main{
    margin: 100px;
    width: 100px;
    height: 4em;
    border: 1px solid #000;
    text-align: center;
}
/*JQuery部分*/
(function(){
    var divH = $('.main').height();
    var $p = $("p", $(".main")).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
})();

5 清除浮动

.clearfix {
    clear: both;
    *zoom: 1;
}

.clearfix:after {
    display: block;
    overflow: hidden;
    clear: both;
    height: 0;
    font-size: 0;
    visibility: hidden;
    content: ".";
}

6 模糊文本

color: transparent; text-shadow: 0 0 2px rgba(0,0,0,0.8);

转载于:https://www.cnblogs.com/yanyuji/p/6692606.html