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

[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)

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题