CSS - 几种样式

图片指定宽长比

<div class="image">
    <div>
        <img src="xxx" />
    </div>
</div>

padding-top计算百分比的基数是容器的width，示例中宽高比为4:3

percentage: The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode) of the containing block. Must be nonnegative.

.image {
    width: 100%;
    padding-top: calc(3 / 4 * 100%); /* calc(Height / Width * Percentage%) */
    position: relative;
    overflow: hidden;
    div {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }
}

设置文本最大展示行数

<div class="title">xxx</div>

示例中设置最大行数为3

.title {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* max lines */
    -webkit-box-orient: vertical;
}

设置文本自动换行

单词截断换行

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
}