Bootstrap Pill 文本截断hover时无法维持固定尺寸问题求助

你的问题根源主要有两点：一是Bootstrap徽章默认内边距加上inline元素的空白字符引发布局偏移；二是hover时元素display属性切换导致尺寸变化。下面是具体修复方案：

核心修改思路 #

• 给徽章容器设置固定宽度和flex布局，确保hover前后尺寸不变，同时让文本与删除按钮自动分配空间
• 消除inline元素间空白字符的影响
• 调整截断文本样式，让它在hover时自动收缩截断，给删除按钮留出位置

修改后的完整代码 #

CSS #

/* 固定徽章尺寸，用flex布局对齐内部元素 */
.badge.badge-color {
  background-color: #A4A4A4;
  color: #FFFFFF;
  width: 120px; /* 可根据需求调整固定宽度 */
  display: flex;
  align-items: center;
  padding: 0.35em 0.65em; /* 覆盖Bootstrap默认padding，避免额外空白 */
}

/* 默认隐藏删除按钮 */
.badge:not(:hover) > .tag-remove {
  display: none;
}

/* 截断文本默认占满剩余空间 */
.truncate {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* hover时显示删除按钮并设置样式 */
.badge:hover > .tag-remove {
  color: #cc0000;
  font-size: 14px;
  margin-left: 8px; /* 给删除按钮留一点间距 */
  text-decoration: none !important;
  white-space: nowrap;
}

HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="badge badge-color">
  <div class='truncate'>Long Tag Title</div>
  <a class="tag-remove" data-confirm="Are you sure you want to delete the tag?" data-remote="true" href="/contacts/100/remove/26">x</a>
</div>

关键调整说明 #

1. flex布局：给.badge-color添加display: flex和align-items: center，让内部文本与删除按钮垂直居中，同时自动分配空间，彻底解决inline元素的空白问题。
2. 固定宽度：设置width: 120px（按需调整），保证徽章在hover前后尺寸完全一致。
3. flex-grow：给.truncate添加flex-grow: 1，让它默认占满徽章内剩余空间，hover时删除按钮出现后，文本自动收缩并截断。
4. 调整内边距：覆盖Bootstrap徽章的默认padding，避免hover时因元素布局变化导致的内边距叠加问题。

修改后徽章会保持固定尺寸，hover时文本自动截断，删除按钮填补空出的位置，不会再出现额外空白。

内容的提问来源于stack exchange，提问作者Ruby Newb