两行文字省略加动态内容布局，使用 css/js
在网页设计中，经常需要限制不同长度的文本在指定宽度内，同时确保动态内容（如图标）的显示。本文将介绍如何使用 CSS 和少量 JS 实现这一效果。
问题
如何使用兼容性较好的 CSS 或少量 JS 实现以下效果？
- 动态内容为一个图标
- 文本行数限制为两行
- 在不同文本长度下，图标和文本保持正确的相对位置
解决方案
立即学习“前端免费学习笔记（深入）”；
.container {
width: 200px; /* 指定限制宽度 */
}
p {
overflow: hidden; /* 隐藏溢出文本 */
white-space: nowrap; /* 不换行显示 */
text-overflow: ellipsis; /* 文本溢出时添加省略号 */
}
.icon {
float: right; /* 图标浮动到右边 */
margin-left: 5px; /* 图标和文本之间的间距 */
}在 JS 部分，可以通过以下方式添加动态内容：
const container = document.querySelector('.container');
const icon = document.createElement('i');
icon.classList.add('icon', 'fa fa-star'); /* 根据需要调整图标样式 */
container.appendChild(icon);参考
- [CodePen Demo](https://codepen.io/xboxyan/pen/PopWVNX)
- [针对浮动布局的解决方案](https://segmentfault.com/a/1190000040172089)
