如何使用 CSS 或少量 JS 实现文本行数限制为两行，并在不同文本长度下保持图标和文本的正确相对位置？

学习文章要努力，但是不要急！今天的这篇文章《如何使用 CSS 或少量 JS 实现文本行数限制为两行，并在不同文本长度下保持图标和文本的正确相对位置？ 》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

两行文字省略加动态内容布局，使用 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)

以上就是《如何使用 CSS 或少量 JS 实现文本行数限制为两行，并在不同文本长度下保持图标和文本的正确相对位置？ 》的详细内容，更多关于的资料请关注golang学习网公众号！