常用文本展示和布局

多行文本超出指定行数后以省略号显示

-webkit-line-clamp 属性指定行数

<!-- 超出5行 -->
p {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; 
}

单行文本超出一行后以省略号显示，可以指定宽度

p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

宽高均以百分比设置

一个div的宽度不固定，设置成20%，现在想让这个div变成正方形，高度也设置成20%,不管用

.circle{
    width: 20%;
    padding-top: 100%;
}

因为当一个div的高度没有时，它的padding值设百分数的话，就依据宽度来定，所以padding-top:100%;就是宽度的值；这样高=宽。

这种方法有一个问题,div里边的内容就要用绝对定位来写了。

单行或多行文字自适应垂直居中

.vertical {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

子元素横轴线垂直居中

.vertical {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    align-items: center;
}

不知道子元素高度情况下子元素垂直居中

parentElement {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}
childElement {
    margin: 0 auto;
}

使用flex布局实现横向内容滚动，仅仅设置父容器display不行

.parent {
    diplay: flex;
    overflow: auto;
}
/* 还需要设置子元素flex:none保证不被压缩 */
.children {
    flex:none
}

flex布局上下左右垂直居中

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

文本不可被选中复制

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

多行段落文本两端对齐

p {
    text-align: justify;
}