如何使用换行字减少 div 中不必要的 space

Question

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

示例位于 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

解决方案 1： 出色地。要回答您的问题，您可以直接将宽度应用于 .title。

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

.title {
    border: 1px solid green;
    width: 58px;
}

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

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

解决方案 2：

但我建议您在以下解决方案中使用浮动模型而不是弹性模型

.wrapper {
  height: 50px;
  font-size: 0px;
}

.title {
    border: 1px solid green;
    height: 50px; 
    line-height: 50px;
}

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

.title, .icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}

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

Answer 2

<div class="wrapper">
    <div class="title">
         Total elements
    </div>
    <div class="icon"></div>
</div>
<style type="text/css">
.wrapper
{
}
.title {
    border: 1px solid green;
    display: inline-block;
    max-width: 60px;
    vertical-align: middle;
}
.icon 
{
    border: 1px solid red;
    width: 8px;
    height: 8px;
    display: inline-block;
}
</style>

Answer 3

您可以使用CSS网格系统：

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

如何使用换行字减少 div 中不必要的 space

How to reduce unnecessary space in div with wrapped word

html

css

word-wrap