CSS 控制文字两端对齐

2019-10-24 14:00:33 阅读：396 来源： 互联网

<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 : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格。

参考：

https://www.cnblogs.com/sapho/p/5999603.html

https://www.cnblogs.com/nangezi/p/9042973.html

标签：两端,文本,distribute,空格,对齐,inter,CSS
来源： https://www.cnblogs.com/bindot/p/css_align.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS 控制文字两端对齐