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

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

霞舞

发布： 2024-11-13 14:27:22

原创

1048人浏览过

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

两行文字省略加动态内容布局，使用 css/js

在网页设计中，经常需要限制不同长度的文本在指定宽度内，同时确保动态内容（如图标）的显示。本文将介绍如何使用 CSS 和少量 JS 实现这一效果。

问题

如何使用兼容性较好的 CSS 或少量 JS 实现以下效果？

动态内容为一个图标
文本行数限制为两行
在不同文本长度下，图标和文本保持正确的相对位置

解决方案

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

查看详情

立即学习“前端免费学习笔记（深入）”；

.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);

登录后复制

参考