<html> <head> <style> td:after { content: ''; } td p{ font-size: 14px; width: 5em;/*調整文字間距*/ text-align-last: justify!important;/*自適應文本寬度*/ } </style> </head> <body> <table> <tbody> <tr> <td> <input type="checkbox" name="SearchChk" id="chk_cgCompanyID" /></td> <td> <p>出庫公司</p> </td> <td> <input name="CompanyID" id="cgCompanyID" class="easyui-textbox" /></td> <td> <input type="checkbox" name="SearchChk" id="chk_cgCompanyID" /></td> <td> <p>設置密碼</p></td> <td> <input name="CompanyID" id="cgCompanyID" class="easyui-textbox" /></td> </tr> <tr> <td> <input type="checkbox" name="SearchChk" id="chk_cgCompanyID" /></td> <td> <p>確認密碼</p></td> <td> <input name="CompanyID" id="cgCompanyID" class="easyui-textbox" /></td> <td> <input type="checkbox" name="SearchChk" id="chk_cgCompanyID" /></td> <td> <p>手機</p></td> <td> <input name="CompanyID" id="cgCompanyID" class="easyui-textbox" /></td> </tr> <tr> <td> <input type="checkbox" name="SearchChk" id="chk_cgCompanyID" /></td> <td> <p>郵箱</p></td> <td> <input name="CompanyID" id="cgCompanyID" class="easyui-textbox" /></td> </tr> </tbody> </table> </body> </html>
實現效果
text-justify基本語法
語法：text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph
參數：
auto :允許瀏覽器用戶代理確定使用的兩端對齊法則 ；
inter-word :通過增加字之間的空格對齊文本，該行為是對齊所有文本行最快的方法，它的兩端對齊行為對段落的最后一行無效 ；
newspaper : 通過增加或減少字或字母之間的空格對齊文本，是用於拉丁文字母表兩端對齊的最精確格式 ；
distribute :處理空格很像newspaper，適用於東亞文檔，尤其是泰國 ；
distribute-all-lines :兩端對齊行的方式與distribute相同，也同樣不包含兩段對齊段落的最后一行，適用於表意字文檔 ；
inter-ideograph : 為表意字文本提供完全兩端對齊。他增加或減少表意字和詞間的空格 。
參數：
auto :允許瀏覽器用戶代理確定使用的兩端對齊法則 ；
inter-word :通過增加字之間的空格對齊文本，該行為是對齊所有文本行最快的方法，它的兩端對齊行為對段落的最后一行無效 ；
newspaper : 通過增加或減少字或字母之間的空格對齊文本，是用於拉丁文字母表兩端對齊的最精確格式 ；
distribute :處理空格很像newspaper，適用於東亞文檔，尤其是泰國 ；
distribute-all-lines :兩端對齊行的方式與distribute相同，也同樣不包含兩段對齊段落的最后一行，適用於表意字文檔 ；
inter-ideograph : 為表意字文本提供完全兩端對齊。他增加或減少表意字和詞間的空格 。
參考：
https://www.cnblogs.com/sapho/p/5999603.html
https://www.cnblogs.com/nangezi/p/9042973.html