多行限制 文字溢出换行 并显示 …


.board_list_content{

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    ont-size: 32rpx;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:4;
    word-break: break-all;
    
}

文字单行 并显示 …


.board_list_content{

    display: block;
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    height: 120rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    word-break: break-all;
    
}

代码简介


    white-space:nowrap;  //强制不换行
    
    text-overflow:ellipsis;//文字隐藏后添加省略号
    
    overflow:hidden; //超出文字自动隐藏

小程序当中的各种引用


    @import 'style/weui.wxss'; //wxss 样式引用
    
    var Api = require('../../utils/api.js') //js 引用
    
    <import src="../../utils/loading.wxml"/> // <template>引用
    
    <include src="login.wxml" /> // 除<template>以外的其他标签引用

小程序浮层的实现

首先添加触摸方法 方法什么都不用做 只是为了隔断事件传递用的


<view class='floatView' wx:if="" capture-catch:touchstart="doNothing"></view>

再添加浮层的半透明属性、位置和层级就行了


.floatView{
  width:100%; 
  height:100%;
  background-color:#000; 
  filter:alpha(opacity=50); 
  -moz-opacity:0.5; 
  opacity:0.5; 
  position:fixed; 
  left:0px; 
  top:90rpx; 
  z-index:1000;
  /* overflow: hidden; */
}

—web–

获取文本行数

$('.desc').each(function(){

    var styles = window.getComputedStyle(this, null);
    var lh = parseInt(styles.lineHeight, 10); //行高
    var h = parseInt(styles.height, 10); //控件高度
    var lc = Math.round(h / lh); //文字行数

    // console.log(lh+"--"+h)
    // console.log(lc)
    if(lc==4){
        $(this).next().show()
    }else{
        $(this).next().hide()
    }
})

判断字符串结尾

//str是否以target结尾
function confirmEnding(str, target) {
    var start = str.length - target.length;
    var arr = str.substr(start, target.length);
    if (arr == target) {
        return true;
    }
    return false;
}

正则电话号码

function checkMobile(mobile) {
    var re = /^1\d{10}$/
    if (re.test(mobile)) {
        // console.log("正确");
        return true
    } else {
        // console.log("错误");
        return false
    }
}

padding 不会增加区域

box-sizing: border-box;

nth-child是从1开始的

ul li:nth-child(1)

背景图片铺满 css3

background:url('a.png') no-repeat;
background-size:cover;

定义手机端整体宽度750rem 代码需要放在body当中

<script>

    var _winWidth=document.body.clientWidth ||
        document.documentElement.clientWidth,
        _style=document.getElementsByTagName("html")[0].style;
        
    _winWidth >=750 ? 
        _style.fontSize = "100px" : _style.fontSize = _winWidth/7.5 + "px";
        
</script>

鼠标箭头 css cursor:


auto                    ：标准光标  
default                 ：标准箭头  
pointer, hand           ：手形光标  
wait                    ：等待光标  
text                    ：I形光标  
vertical-text           ：水平I形光标  
no-drop                 ：不可拖动光标  
not-allowed             ：无效光标  
help                    ：帮助光标  
all-scroll              ：三角方向标  
move                    ：移动标  
crosshair               ：十字标  
e-resize                ：east 向右拉动窗口大小的光标，一下都是
n-resize  
nw-resize  
w-resize  
s-resize  
se-resize  
sw-resize

textarea

resize:none

阴影

/* 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影（默认是外阴影,inset内阴影） */
box-shadow: 10px 20px 5px 40px black inset;
/* 阴影颜色如果不写 会默认盒子文字的颜色 */
box-shadow: 10px 20px 5px;

/* 文字的阴影 参数比较少 */
/* 水平偏移 垂直偏移 模糊度 阴影颜色（也是可以省略的） */
text-shadow:  10px 20px 5px green;

ul去除小点

ul{list-style: none;}

li横向排列

li{float: left;}

margin

竖直方向会按重叠 水平方向不会重叠