前言
通用模板，可适用于任意前端项目。
如下图所示，手机电脑通用。
示例代码
根据自己的需求修改即可。
<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>
