html - 如何在保持 CSS 边框的同时换行文本

Question

所以我创建了一个布局片段，我想在我的代码中的不同地方重复使用它。 JSFiddle 具有以下 dom 结构的正常外观:https://jsfiddle.net/64x9udcr/

<a class="stamp">
    <div class="stamp-left"><span>0023f23f2</span></div>
    <div class="stamp-right"><span>The quick brown fox jumped over the lazy dog</span></div>
</a>

左边基本上是一个标识符，右边是一个描述，不要太复杂。它也是内联的，所以它可以像标识符一样包含在一行文本中。例如:

我遇到的麻烦是在必要时将其包装起来。以下是我希望在需要包装时发生的情况的图像。 A 是首选，但如果不可能，则 B。

关于我应该使用哪种 CSS 组合的任何指示？

Answer 1

使用 flex 方法，对代码进行少量更改。

https://jsfiddle.net/64x9udcr/2/

.label,
.stamp {
  border-radius: 0.25em;
  color: rgb(255, 255, 255);
  display: inline;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  padding: 0.2em 0.6em 0.3em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}

.stamp {
  border: 1px solid rgb(218, 218, 218);
  color: inherit;
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  margin-bottom: 0.1em;
  padding: 0;
}

.stamp .stamp-left,
.stamp .stamp-right {
  display: inline-block;
  padding: 0.2em 0.6em;
}

.stamp .stamp-left {
  background: rgb(218, 218, 218) none repeat scroll 0 0;
  font-family: "courier";
}

.select2-results__option--highlighted .stamp .stamp-left {
  color: rgb(51, 122, 183);
}

a.stamp:hover {
  border-color: rgb(35, 82, 124);
}

a.stamp:hover .stamp-left {
  background-color: rgb(35, 82, 124);
  color: rgb(255, 255, 255);
}

a.stamp:hover .stamp-right {
  color: rgb(35, 82, 124);
}

.container {
  display: flex;
  width: 100%;
}

.stamp {
  max-width: 100%;
  overflow: hidden;
  min-width: 200px;
}

<div class='container'>
  <a class="stamp">
    <div class="stamp-left"><span>0023f23f2</span>
    </div>
    <div class="stamp-right"><span>The quick brown fox jumped over the lazy dog</span>
    </div>
  </a>
</div>