Question

如果有一个固定宽度div，则内部有许多固定宽度的跨度（或其他容器）。我如何使用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>

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

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

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

2 个答案: