05-CSS中常见问题

CSS中常见问题

水平垂直居中

子元素是文本、行内、行内块

• 水平居中：父元素设置text-align:center;，或子元素text-align:center;，因为这个属性会自动继承
• 垂直居中
  • 单行：设置行高等于高
  • 多行：父元素display:table，子元素disply:table-cell;vertical-align:middle即可

子元素是已知宽高的块元素

• 水平居中：子元素margin:0 auto;
• 垂直居中：父元素display:table-cell;vertical-align:middle，要注意的是这种方式父元素会与其他同样是display:table-cell的元素在同一行上，其他的显示形式则不会在同一行上

开启绝对定位已知宽高元素

• 水平居中：父元素position: relative;，子元素margin: 0 auto;position: absolute;left: 0;right: 0;
• 垂直居中：父元素position: relative;，子元素margin: auto 0;position: absolute;top: 0;bottom: 0;

开启绝对定位不知宽高的元素

• 水平居中：父元素position: relative;，子元素position: absolute;left: 50%;transform: translateX(-50%);
• 垂直居中：父元素position: relative;，子元素position: absolute;top: 50%;transform: translateY(-50%);

开启弹性或网格布局的容器

容器元素display: flex|inline-grid或display: grid|inline-grid

• 水平居中：容器元素justify-content: center;
• 垂直居中：容器元素align-items: center;

文字溢出省略

单行文字

但是要注意，若是弹性盒的子元素时，该方式将失效，解决方法再套一层span行内元素，即孙元素不会失效

.text-ellipsis {
    overflow: hidden;   /* 内容溢出隐藏 */
    text-overflow: ellipsis;    /* 文字溢出隐藏 */
    white-space: nowrap;    /* 文字不换行 */
}

多行文字

方案1

该方案最好不要设置高度，否则省略号位置不好控制

.multiline-ellipsis {
    overflow: hidden;    /* 内容溢出隐藏 */
    text-overflow: ellipsis;    /* 文字溢出省略号 */
    white-space: normal;    /* 文字换行 */
    display: -webkit-box;
    -webkit-line-clamp: 4;  /* 行数 */
    -webkit-box-orient: vertical;
}

方案2

通过添加定位伪元素添加省略号，缺点是必须设置高，并且高必须是行高的整数倍，否则比较丑

.multiline-ellipsis {
    position: relative;
    overflow: hidden;
    max-height: 40px;
    white-space: normal;
}
.multiline-ellipsis::after {
    content: "...";
    position: absolute;
    bottom: .2em;
    right: 0;
    padding-left: .2em;
    padding-right: 1em;	/* 根据时间情况调整文字和省略号的间隔距离 */
    background-color: #fff;
}