js文字兩端對齊

一、問題

二、原因及解決方法

三、總結

一、問題

1.text-align: justify; 不就可以了嗎？但是實際測試無效

二、原因及解決方法

1.原因：text-align只對非最后一行文字有效。只有一行文字時，text-align無效，要用text-align-last:justify

2.對于多行不同div中的文字需要在視覺上兩端對齊：還需要對所有的div設置合適的width,以便統一實現兩端對齊的效果。

width:100px;(根據需要設置能夠顯示下所有的字符/固定值)
text-align: justify;
text-align-last: justify;

3.具體示例如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Text Align Example</title><style>.box {border: 1px solid #ccc;padding: 10px;}.justify {text-align: justify;text-align-last: justify;}ul > li > span {display: inline-block;width: 100px;text-align: justify;text-align-last: justify;}</style></head><body><div class="box"><p class="justify">這是一段測試文字，用于演示 text-align: justify 和 text-align-last: justify 的效果。這段文字會被兩端對齊，包括最后一行。</p><h3>下面的標簽(商品名稱，商品保質期，產地)兩端對齊</h3><ul><li><span>商品名稱：</span><span>獼猴桃</span></li><li><span>商品保質期：</span><span>5天</span></li><li><span>產地：</span><span>陜西省寶雞市</span></li></ul></div></body>
</html>

4.優化，上面的例子中冒號也會在兩端對齊中產生影響：為了使所有文字兩端對齊，可以把文字和冒號分開在不同的容器中

具體代碼如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Text Align Example</title><style>.box {border: 1px solid #ccc;padding: 10px;}.justify {text-align: justify;text-align-last: justify;}ul > li > span {display: inline-block;width: 115px;text-align: justify;text-align-last: justify;}</style></head><body><div class="box"><p class="justify">這是一段測試文字，用于演示 text-align: justify 和 text-align-last: justify 的效果。這段文字會被兩端對齊，包括最后一行。</p><h3>下面的標簽(商品名稱，商品保質期，產地)兩端對齊</h3><ul><li><span>商品名稱：</span><span>獼猴桃</span></li><li><span>商品保質期：</span><span>5天</span></li><li><span>產地：</span><span>陜西省寶雞市</span></li></ul><h3>優化版</h3><ul><li><span>商品名稱</span><span>：獼猴桃</span></li><li><span>商品保質期</span><span>：5天</span></li><li><span>產地</span><span>：陜西省寶雞市</span></li></ul></div></body>
</html>

三、總結

1.單行文字兩端對齊：設置 text-align-last:justify

2.多行文字中的一部分對齊：設置 text-align:justify; text-align-last:justify;同時要設置固定的寬度，保持兩端對齊的效果一致。

希望對你有幫助！

如有錯誤，歡迎指正！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/899617.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/899617.shtml
英文地址，請注明出處：http://en.pswp.cn/news/899617.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！