html - 如何用包装字减少div中不必要的空间

Question

我有一个固定宽度和高度的小 div，里面有文字，可能会被包裹和图标 我所需要的只是让图标尽可能靠近文本，但如果文本被包裹起来，它里面会有额外的空间

例子在 JsFiddle

HTML

<div class="wrapper">
    <div class="title">
         Total elements
    </div>
    <div class="icon"></div>
</div>

CSS

wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
  width: 100px;
}

.title {
    border: 1px solid green;
}

.icon {
  border: 1px solid red;
  width: 8px;
  height: 8px;
}

Answer 1

您可以使用 CSS 网格系统:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0em;
  height: 50px;
  width: 100px;
}