Problem getting a Bootstrap pill to resize with truncated text

user_15054139 0
Viewed 34

I've been struggling with this for a while now, including toying with javascript to accomplish this to no avail. I have a tag list in a table that shows a link when hovered over. Thanks to suggestions of another SOer, I've been able to truncate the text further to hopefully get the x to fill the newly vacated space. The ultimate goal is to have the pill remain the same size while displaying the truncated text and the link.

I wrapped the applicable div and the link in a border to confirm the fact that the badge itself is adding additional white space on hover and I cannot get rid of it. I'd appreciate any suggestions!

bootstrap badge adding additional whitespace on :hover

html:

.badge:not(:hover)>.tag-remove {
  display: none;
}

.badge:hover>.truncate {
  width: 60%;
  margin-left: -3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.badge:hover>.tag-remove {
  color: #cc0000;
  font-size: 14px;
  margin-right: -1px;
  white-space: nowrap;
  text-decoration: none !important;
}

.badge-color {
  background-color: #A4A4A4;
  color: #FFFFFF;
}
<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>

bootstrap-5 css html
1 Answers

It's best to apply most of your styles regardless of hover state. That way, there are minimal changes upon hovering that might cause the badge to resize or reposition itself.

To shrink the badge label upon hovering, change its width value. Use a negative margin to put the "remove" link in the right position.

.badge:not(:hover) > .tag-remove {
  display: none;
}

.badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
}

.truncate {
  display: block;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge:hover > .truncate {
  width: calc(100% - 1em);
}

.tag-remove {
  margin-left: -1em;
  width: 1em;
  color: #cc0000;
  font-size: 14px;
  line-height: 0;
  text-align: right;
  text-decoration: none !important;
}

.badge-color {
  background-color: #a4a4a4;
  color: #ffffff;
}
<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>

user_34692730
Related