禁止缩放+显示省略号+文本居中+宫格布局

禁止用户缩放

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

单行显示

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本显示省略号

overflow: hidden;/*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
display: -webkit-box;
-webkit-line-clamp:2; /*想要显示的行数*/
-webkit-box-orient: vertical;

文本居中

margin-left: auto;
margin-right: auto;
width: 400px;

宫格弹性盒子布局

display: flex;
flex-wrap: wrap;    /* 换行 */
align-content: flex-start;  /* 侧轴顶部位置对齐 */
justify-content: flex-start; /* 主轴左侧起始位置对齐 */