div宽度没有换行符文本

Question

HTML

<div class="wrapper">
  <div class="tag">
    TestTestTestTest TestTestTestTestTestTest TestTestTest
  </div>
</div>

CSS

.wrapper {
  max-width: 250px
}

.tag {
  vertical-align: top;
  background-color: red;
  padding: 3px;
  text-align: left;
  font-size: 12px;

  color: white;
  display: inline-block;
}

您可以看到第一行之后有一些空格， 如何设置div的宽度适合内容？ 当前宽度应为break-all而不是break-word

的宽度

当前

[Test Test Test    ]
[Test              ]

预期

[Text Text Text]  // Keep Break word and the width fit the content
[Text          ]

这是jsfiddle https://jsfiddle.net/1f9atmwu/

Answer 1

我认为您也可以使用flex box和flex-wrap