前面的博文有div超寬隱藏（LODOP打印超過后隱藏內容樣式），還有有table設置超寬隱藏（），此外，還有超寬后用省略號表示的css樣式，此文是針對這個樣式的。
該樣式正常情況下沒問題，但是遇到-短線這種英文連接符的時候，會導致換行，換行后隱藏后面的內容，為了寬度固定，可以設置不換行樣式，但是瀏覽器顯示正常，lodop可能會有問題。
此問題可以用table里需要的內容嵌套div來解決。
加了居中樣式后，-線會可能會變省略號問題：可見本博文的最下方的代碼測試代碼2和圖示2。
測試代碼1：
去掉了注釋，改為頁面文字提示：測試代碼相關樣式
overflow:hidden 超出隱藏
text-overflow:ellipsis 超出隱藏后的用省略號表示
white-space:nowrap 不換行
word-break: break-all 拆分英文單詞如-短線
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WEB打印控件LODOP</title> <script language="javascript" src="LodopFuncs.js"></script> </head> <body> <div id="d1"> 超出隱藏： <table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--超出隱藏--> <tr> <td style="width:40px;">1</td> <td style="width:100px;overflow:hidden;">333333333333333333333333333333333333333333333333</td> </tr> </table> <br> 超出隱藏並用省略號表示： <table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--超出隱藏並用省略號表示--> <tr> <td style="width:40px;">1</td> <td style="width:100px;text-overflow:ellipsis;overflow:hidden;">333333333333333333333333333333333333333333333333</td> </tr> </table> <br> 超出隱藏用省略號，內容有-小短線，變成了兩行： <table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--超出隱藏用省略號，內容有-小短線，變成了兩行--> <tr> <td style="width:40px;">1</td> <td style="width:100px;text-overflow:ellipsis;overflow:hidden;">3-3-3333333333333333333333333333333333333333333333</td> </tr> </table> <br> 超出隱藏用省略號，內容有兩組-小短線，變成了三行： <table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--超出隱藏用省略號，內容有兩組-小短線，變成了三行--> <tr> <td style="width:40px;">1</td> <td style="width:100px;text-overflow:ellipsis;overflow:hidden;">3-3-333333333333333table-layout3333333333333333333333333333333</td> </tr> </table> <br> 超出隱藏用省略號，內容有-小短線，設置td不換行樣式： <table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!----> <tr> <td style="width:40px;">1</td> <td style="width:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">3-3-3333333333333333333333333333333333333333333333</td> </tr> </table> <br> 超出隱藏用省略號，內容有-小短線，設置td不換行樣式，並且單詞拆分： <table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!----> <tr> <td style="width:40px;">1</td> <td style="width:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break: break-all">3-3-3333333333333333333333333333333333333333333333</td> </tr> </table> <br> 超出隱藏用省略號，內容有-小短線，td里加div，並設置不換行。 <table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!----> <tr> <td style="width:40px;">1</td> <td style="width:100px;"><div style="width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">3-3-3333333333333333333333333333333333333333333333</div></td> </tr> </table> <br> </div> <a href="javascript:prn1_preview()">表格寬度是否固定</a><br> <script language="javascript" type="text/javascript"> var LODOP; //聲明為全局變量 function prn1_preview() { LODOP=getLodop(); LODOP.PRINT_INIT(""); LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("d1").innerHTML); LODOP.PRINT_DESIGN(); //LODOP.PREVIEW(); }; </script> </body>
圖示1：如圖，有些在瀏覽器中顯示正常，但是LODOP預覽不正常，解析超文本存在差異，可以更換樣式等方式，排查樣式，修改樣式，實現最后的需要的效果。
如圖，瀏覽器和LODOP預覽中樣式的差異，除了換行不換行，還有可能存在省略號樣式問題，圖中的是qq瀏覽器極速模式下的瀏覽器樣式，和lodop解析引擎是不同的。
在遇到居中樣式的時候，有的單元格超過了寬度換行了，設置超出變省略號樣式，如果內容里有-短線，lodop預覽可能會變成點。
對於這種單元格，可以去掉居中樣式，因為它本身內容布滿單元格，已經超出了。
方法1：給這個單元格去掉居中樣式
方法2：加div，用div控制超出變省略號
以上是目前我測出了的可以的方法，嘗試直接加上高度沒有效果，其他樣式等組合可能也能達到效果，可以實際試驗樣式。
測試代碼 2：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WEB打印控件LODOP</title> <script language="javascript" src="LodopFuncs.js"></script> </head> <body> <div id="d1"> 不加居中樣式的： <table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" > <tr> <td style="width:40px;">1</td> <td style="width:100px;text-overflow:ellipsis;overflow:hidden;">3-3-3333333333333333333333333333333333333333333333</td> </tr> </table> <br> 加了居中樣式的： <table border=1 style="width:140px;height:20px;border-collapse:collapse;table-layout:fixed;" > <tr> <td style="width:40px;text-align:center;">1</td> <td style="width:100px;text-overflow:ellipsis;overflow:hidden;text-align:center;">3-3-3333333333333333333333333333333333333333333333</td> </tr> </table> <br> 改用div的： <table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" > <tr> <td style="width:40px;text-align:center;">1</td> <td style="width:100px;"><div style="width:100px;overflow:hidden;text-overflow:ellipsis;text-align:center;white-space:nowrap;">3-3-3333333333333333333333333333333333333333333333</div></td> </tr> </table> <br> </div> <a href="javascript:prn1_preview()">表格寬度是否固定</a><br> <script language="javascript" type="text/javascript"> var LODOP; //聲明為全局變量 function prn1_preview() { LODOP=getLodop(); LODOP.PRINT_INIT(""); LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("d1").innerHTML); LODOP.PRINT_DESIGN(); //LODOP.PREVIEW(); }; </script> </body>
圖示2：
