头像加昵称加文本换行怎么实现，文本换行后第二行要在最左边

在HTML或CSS中，如果你想实现头像、昵称和文本的布局，其中文本可以自动换行并在新的一行显示在最左侧，你可以使用`<div>`元素配合一些基本样式。这里是一个简单的示例：

<div class="profile-content">
    <img src="your-avatar.jpg" alt="头像"> <!-- 替换成你的头像URL -->
    <span class="username">昵称</span>
    <p class="text-wrap">
        这是一段文本，如果内容太长会自动换行<br>文本会在每行开始对齐左边。
    </p>
</div>

<style>
.profile-content {
    display: flex;
    align-items: flex-start; /* 确保文本始终从上向下对齐 */
}

.username {
    margin-right: 10px; /* 为昵称添加一点间距 */
}

.text-wrap {
    white-space: pre-line; /* 换行并保持单词边界 */
    overflow-wrap: break-word; /* 文本过长时允许折行 */
    text-indent: 0; /* 第二行恢复到左对齐 */
}
</style>

在这个例子中，`.profile-content` 使用了 Flexbox 布局，`white-space: pre-line` 让文本按行换行，`overflow-wrap: break-word` 保证长行会被断开。`text-indent` 属性设置为0会使第二行文本回到左对齐。