实用的两个移动端demo

今天看了两个挺好的移动端demo，记录一下

一.文本截取

实现的样式是这样的，如下图：

看上去是有些丑陋，简要说明一下，实现功能是文字显示两行，超出部分截掉，用三个点代替，后面还有一个更多的图标（只是用了>代替啦～～），你可以把他想象一张很完美的效果图～～

首先说一下思路，实现方法比较巧妙，主要使用伪元素after和before的content: attr(attribute-name)

1.前面用:bofore控制前面的文字，最后一行文字使用:after控制

2.使用felx-box的-webkit-line-clamp控制显示文字行数

3.使用text-indent以及padding-right 留出`更多`的图标

4.使用字体颜色以及背景颜色进行一系列字体掩盖

具体的请看代码注释～

代码实现：

html代码如下：

<!--div里要有所有内容，以撑开容器大小，title属性值可以根据显示行数适当减少-->
<!--i里面是更多的图标，这里只是简单的代替-->
<div class="js-toggle-box lastline-space-ellipsis" title="思路很简单：由于控件所对应的label元素是可以点击并切换控件状态的">
    <div class="expend-box">
        思路很简单：由于控件所对应的label元素是可以点击并切换控件状态的，而label元素的样式又可以自由设定，因此我们可将input元素隐藏，通过label元素实现交互。
        <i class="right-row"> > </i>
    <div>
</div>

css代码如下：

.lastline-space-ellipsis {
    width: 200px;
    position: relative;
    max-height: 40px;       /* 最大高度 = line-height * 显示的行数  */
    line-height: 20px;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;  /*避免出现过长的英文单词*/
    color: #fff;            /* 同背景颜色相同，将容器内的字体掩藏 */
    border: 1px solid red;
}


.lastline-space-ellipsis:after,
.lastline-space-ellipsis:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    content: attr(title);    /* 使用content获取title属性值 */
    color: #333;             /* 字体颜色 */
}
.lastline-space-ellipsis:before {
    display: block;
    overflow: hidden;
    z-index: 1;
    max-height: 20px;        /* (显示的行数 － 1) * line-height */
    background-color: #fff;  /* 与背景颜色相同 */
}
.lastline-space-ellipsis:after {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
    -webkit-line-clamp: 2;   /* 显示行数 */
    text-indent: -1em;       /* 以下是让文字缩进1个字符留出空白部分 */
    padding-right: 1em;
}
.expend-box {
    max-height: 40px;       /* 显示的行数 * line-height */
    position: relative;
}
.right-row {                /* 调整图标的位置、大小 */
    background-size: cover;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 7px;
    right: 2px;
    color: #333;
}

如果想还要实现点击显示更多出现所有文字，只要控制lastline-space-ellipsis类名就好了，但是用js判断当前状态时，要根据高度进行判断。

缺点：现在我能感受到的缺点就是title值过长，但感觉这完全可以忽略。

此方法参考自AlloyTeam：http://www.alloyteam.com/2015/10/usage-of-content-attibute-of-pseudo-elements/

二 . 用纯css实现开关按钮

 实现效果如下图：

html代码如下：

<input type="checkbox" id="checkbox" class="checkbox"/>
<div class="checkbox-wrapper">
    <label for="checkbox" class="checkbox-label"></label>
</div>

css代码如下：

.checkbox-wrapper {
    position: relative;
    width: 80px;
    height: 32px;
    overflow: hidden;
}
.checkbox {
    display: none;
}
.checkbox-label::before,
.checkbox-label::after {
    position: absolute;
    line-height: 32px;
    height: 32px;
    width: 40px;
    font-family: sans-serif;
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.checkbox-label::before {
    content: 'ON';
    left: -40px;
    background: #45b6af;
}
.checkbox-label::after {
    content: 'OFF';
    right: -40px;
    background: #f3565d;
}
.checkbox-label {
    display: block;
    position: absolute;
    left: 0;
    width: 40px;
    height: 32px;
    transition: all .4s ease;
    cursor: pointer;
    background: #dddddd;
}
.checkbox:checked + .checkbox-wrapper .checkbox-label {
    left: 40px;
}

说实话以前一直认为实现这种样式的好高大上，结果后来发现。。。。嘿嘿～

强大的还有许多，需要我慢慢积累～今天就这样了！