[html] 如何实现多行文字梯形排版？

可以利用文字会环绕浮动元素的特性来做：HTML:#box {width: 400px;height: 600px;background-color: red;
}
#box .float-div{float: left; // 浮动起来clear: both; // 这个很重要，不然会排版出错background: rgba(0,0,0,0.2); // 这里只是为了看看而已
}<div id="box"><span id="text">我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，</span>
</div>JS// JS 部分仅仅是为了生成 div, 就不多优化了
var box = document.getElementById('box')
var text = document.getElementById('text')
var bH = box.offsetHeight
var bW = box.offsetWidth
var step = 10
var dH = 10
var dW = bW - step * 4
var num = parseInt(bH / dH)
var tem = document.createDocumentFragment()
for(var i=0;i < num && dW > 0;i++){var d = document.createElement('div')d.style.height = dH + 'px'd.style.width = dW + 'px'd.classList.add('float-div')tem.appendChild(d)dW -= step
}
box.insertBefore(tem,text)

在这里插入图片描述