CSS - 通用左边图片，右边内容，并且控制长度溢出处理模板（vue | uniapp | 微信小程序）
前言
通用模板，可适用于任意前端项目。
如下图所示，手机电脑通用。
示例代码
根据自己的需求修改即可。
<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>
原文地址：https://blog.csdn.net/weixin_44198965/article/details/142387189
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！