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

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[html] 如何实现多行文字梯形排版？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。