之前有關于LODOP中純文本換行的相關博文：Lodop純文本英文-等符號自動換行問題
純文本的遇到不拆分的單詞的時候，可以通過LODOP 語句設置允許標點溢出，且英文單詞拆開。
超文本需要通過css樣式控制，相關博文：Lodop打印控件傳入css樣式、看是否傳入正確樣式
Lodop是基于本機windows底層引擎進行渲染解析的，與ie調用的引擎一致，注意調用的css樣式是否支持問題，通過調試樣式，更換樣式等，達到需要的效果。
關于table中不換行隱藏等相關博文：LODOP表格table簡短問答及相關博文

在div中，即使設置div的寬度，由于樣式原因，也可能會超出，甚至超出自己想要的打印區域，也可能造成打印不全。
有背景色會更加清楚，這里給div加了背景色，只設置了寬度，高度按照內容自適應。
最后是是三個div，div加的是背景圖，中間的div是是條狀平鋪，實現高度按照內容。

第一個div：只加了寬度和背景色(word-break和word-wrap默認值 normal）
第二個div：加了word-break:break-all;
第三個div：加了word-wrap:break-word;
第四個區域（三個div）:中間的div加了加了word-break:break-all;（另外div兩個是上邊的圖片，和下邊的圖片高度都是10px）

代碼：

<div id="d1"> <div style="width:100px;background-color:#00ff00;">盡量使用最新版Lodop和c-lodop。http://www.c-lodop.com/download.html最新版下載地址 </div><br> <div style="width:100px;background-color:#db7d7d;word-break:break-all;">盡量使用最新版Lodop和c-lodop。http://www.c-lodop.com/download.html最新版下載地址 </div><br> <div style="width:100px;background-color:#45e3d2;word-wrap:break-word;">盡量使用最新版Lodop和c-lodop。http://www.c-lodop.com/download.html最新版下載地址 </div><br> <div style="background-image:url(images/top1.jpg);height:10px;margin-left:0px;width:100px;clear:both;"></div> <div style="background-image:url(images/mid.jpg);margin-left:0px;width:100px;word-break:break-all;">盡量使用最新版Lodop和c-lodop。http://www.c-lodop.com/download.html最新版下載地址</div> <div style="background-image:url(images/bot.jpg);height:10px;margin-left:0px;width:100px;"></div> <br> </div>

圖示：由于只設置了寬度，內容是否換行，也會導致行數的差異，導致div的高度不同。PS：那個用圖片平鋪的只是中間，上下邊框的條狀圖都是10px。

?

注意lodop不輸出css背景圖，可以輸出背景色，所以那個圖片平鋪的會失去背景圖（相關博文：Lodop打印控件不打印css背景圖怎么辦）。
注意Lodop是基于本機windows底層引擎進行渲染解析的，與ie調用的引擎一致，所以如果用lodop打印，注意css樣式解析的不同，在ie下查看效果。
例如，同樣的代碼，在qq瀏覽器極速模式和兼容模式下的效果是不同的：

這是某版本的qq瀏覽器和火狐瀏覽器測試的，qq瀏覽器的極速模式和兼容模式內核不同，lodop中效果類似兼容模式。
火狐瀏覽器的樣式和qq瀏覽器的極速模式相似，但是大概是瀏覽器默認字體大小有差異，導致了字體和換行都有差異，所以顯示出了三種效果。三種效果我分別用三種色塊區域劃分出來。

轉載于:https://www.cnblogs.com/huaxie/p/11281082.html

總結

以上是生活随笔為你收集整理的超文本css样式换行的全部內容，希望文章能夠幫你解決所遇到的問題。

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