Flexbox可以解决这个问题，我们只需要将省略号扩展到 .description div并进行一些细微调整即可。

Flexbox can solve this, we just have to expend the ellipsis to the .description div and make a few minor tweaks.

* {
  box-sizing: border-box;
}
.parent {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
  padding: .5em;
  border: 1px solid grey;
}
.description {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon {
  flex: 0 0 auto;
  background-color: rebeccapurple;
  color: white;
  padding: .5em;
  margin: 0 .25em;
}
.button {
  flex: 0 0 auto;
  background-color: #ccc;
  padding: .5em;
}

<div class="parent">
  <div class="description">
    <span class="text">Lorem sit amet, consectetur adipisicing elit doloremque earum in, voluptas dolorum sit ab modi facere tempora est, sequi molestiae! Commodi vitae sapiente ipsum, nisi facilis impedit aut? Repellendus!</span>
    <span class="icon">I</span>
    <span class="icon">I</span>
    <span class="icon">I</span>
    <span class="icon">I</span>
  </div>
  <div class="button">
    Button
  </div>
</div>

<div class="parent">
  <div class="description">
    <span class="text">Lorem sit amet</span>
    <span class="icon">I</span>
    <span class="icon">I</span>
  </div>
  <div class="button">
    Button
  </div>
</div>