如何在固定 div 中包装溢出的跨度答案

【问题标题】：How do I wrap a overflowed span in fixed div如何在固定 div 中包装溢出的跨度
【发布时间】：2015-03-25 15:53:57
【问题描述】：

如果有一个固定宽度的 div，里面有许多固定宽度的 span（或其他容器）。如何使用 CSS 来实现这种风格：

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

而不是只换行，它在文本之后的 span 中有额外的空间，像这样：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>

【问题讨论】：

标签： html css

【解决方案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

【讨论】：

【解决方案2】：

如下修改.diagram 的CSS。这是fiddle

.diagram  {
     border-style: solid;
     border-width: 1px;
     width: 30%;
     max-width: 30%;
     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>

【讨论】：

也谢谢你的回答，虽然我只能选择一个接受。