CSS - 通用左边图片，右边内容，并且控制长度溢出处理模板（vue | uniapp

CSS - 通用左边图片，右边内容，并且控制长度溢出处理模板（vue | uniapp | 微信小程序）

news2024/11/16 0:44:49

前言

通用模板，可适用于任意前端项目。

如下图所示，手机电脑通用。

在这里插入图片描述

示例代码

根据自己的需求修改即可。

<body>
    <div class="container">
        <!-- 头像图片 -->
        <img class="avatar" src="https://cdn.uviewui.com/uview/album/1.jpg" />
        <!-- 右侧内容 -->
        <div class="box">
            <div class="flex">
                <span>左边</span>
                <span>右边</span>
            </div>
            <div class="text-overflow">这是一段超长的文本，根据屏幕宽度自动适应，超出会隐藏掉，反之显示出来。</div>
        </div>
    </div>
</body>

<style>
body {background: #cfcfcf;margin-top: 100px;}
/* 根节点 */
.container {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
}
/* 右侧内容 */
.box {
    margin-left: 20px;
    width: 100%;
}
/* 头像图片 */
.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
/* 文字溢出显示"..."处理 */
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 这里控制行数,多少行隐藏 */
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
/* 左右弹性布局 */
.flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
</style>