html - 如何将溢出的跨度包装在固定的 div 中

Question

如果有一个固定宽度的 div，里面有许多固定宽度的 span(或其他容器)。我怎样才能使用 CSS 来实现这种风格:

http://i.imgur.com/NHerkVc.jpg

而不是只换行文本，它在文本后的跨度中有额外的空间，像这样:https://jsfiddle.net/3zk80y77/2/

.diagram  {
     border-style: solid;
     border-width: 1px;
     width: 30%;
     max-width: 30%;
     display: flex;
     flex-wrap: wrap;
     background-color:#605773;
}

.block {
    border-style: solid;
    border-width: 1px;
    word-wrap: break-word;
    word-break: break-all;
}



<div class="diagram">
        <font class="block">aaaaa aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaa axxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxx</font>
        <span class="block">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
        <span class="block">cccccccccccccccccccccccccccccccccccccccccccc</span>
        <span class="block">dddddddddddddddddddddddddddddddddddddddddddddd</span>
        <span class="block">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
        <span class="block">ffffffffffffffffffffffffffffffff</span>
    </div>

Answer 1

这是工作示例

.diagram {
  border-style: solid;
  border-width: 1px;
  width: 30%;
  max-width: 30%;
  background-color: #605773;
  word-break: break-all;
}
.block {
  border-style: solid;
  border-width: 1px
}

<div class="diagram">
  <font class="block">aaaaa aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaa axxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxx</font>
  <span class="block">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
  <span class="block">cccccccccccccccccccccccccccccccccccccccccccc</span>
  <span class="block">dddddddddddddddddddddddddddddddddddddddddddddd</span>
  <span class="block">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
  <span class="block">ffffffffffffffffffffffffffffffff</span>
</div>

只需从 .block 中剪切 word-break: break-all; 并将其粘贴到 .diagram