我有一个< div>具有硬编码宽度.在< div>内是几百英寸的< span>标签.我可以包裹跨距以使行间距正确并且包裹在跨度之间吗?我使用自动换行:break-word,看起来很混乱.
这是伪代码.
span { margin: 2px; border: 1px dotted #cccccc; padding: 4px 10px 4px 10px; } div { padding: 5px; margin: 5px; border: 1px solid #cccccc; width: 800px; word-wrap: break-word; } <div> <span>stuff</span> <span>more stuff</span> <span>even more stuff</span> . . . </div>
谢谢!
编辑澄清:每行应该有多个跨距,并且应该在跨距之间进行包装.
解决方法
EDIT(2017):带有包装显示的FlexBox:flex; flex-wrap:wrap与IE10(和Android 4.4)兼容,允许水平(对齐,左右对齐,空间,居中)和垂直(对齐项)的多种对齐,线条之间也有多种间距(align-content …如果设置了高度,通常).
额外:项目之间没有~4px空白,需要像内联块一样进行处理.你做了你想做的事情:没有装订线,flex:1 1 auto或padding:例如1rem
Cheatsheet for Flexbox on CSS Tricks
/编辑
额外:项目之间没有~4px空白,需要像内联块一样进行处理.你做了你想做的事情:没有装订线,flex:1 1 auto或padding:例如1rem
Cheatsheet for Flexbox on CSS Tricks
/编辑
Span似乎不是很语义,也许使用无序列表?
如果我很清楚你的问题,那么你想要的每条线的跨度是多少,但是没有跨越线并且在另一条线上完成?
然后是下面的小提琴:http://jsfiddle.net/MRR6P/就可以了.尝试
span { line-height: 1.8; word-wrap: normal; display: inline-block; }