如何在CSS中保持边框的同时包装文本

Question

所以我创建了一个布局片段，我想在我的代码中的各个地方重复使用。 JS通过以下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/

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;