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

可以利用文字会环绕浮动元素的特性来做：

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.offsetHeightvar bW = box.offsetWidthvar step = 10var dH = 10var dW = bW - step * 4var 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)

效果：