实用的两个移动端demo

<!--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>

.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;
}

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

.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;
}