如何在保持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>