網頁文章內容左右不對齊,為什麼?
問題說明

我做好網站 / 網站改版之後,文章斷行沒有左右對齊,有方法改善嗎?

發生原因
網頁程式碼為求統一,並沒有文書軟體自動調整字距來響應斷行的功能。 由於製作網頁要響應各式各樣的裝置,若是採用文書處理的手動斷行,對各式各樣的裝置來說是不實際的作法之外,也會造成程式碼的不一致。 如果內容是英文,單字長短不一會更難控制版面,顯得問題更嚴重。 關於斷行的問題,製作網頁時有以下三種做法。
(以下文章出自假文生產器)

文字齊左 text-align:left

此為最常見的程式碼,不會使得單字破碎,但缺點就是右邊無法百分百對齊。
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit enim, vulputate eu magna non, ullamcorper porta tortor. Nulla scelerisque varius velit eu blandit. Donec a erat rutrum, viverra est non, aliquet dui. Phasellus eros ipsum, pulvinar vitae metus elementum, feugiat imperdiet enim. Quisque id nibh diam. Pellentesque sit amet ipsum consequat, cursus mauris quis, elementum mi. Cras maximus eros sed purus suscipit faucibus. Ut felis mi, posuere vitae sapien tempor, pulvinar auctor neque. Nunc id viverra dui. In hac habitasse platea dictumst. Proin varius arcu sit amet auctor fringilla. In dictum pulvinar est, vitae tincidunt magna dignissim ac. Nunc aliquam arcu at eleifend facilisis.

文字左右對齊 text-align:justify

文字左右對齊也是不破壞單字結構的斷行方式,但容易使字距不統一而打亂閱讀節奏,對使用者來說閱讀可能比文字齊左更有負擔。
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit enim, vulputate eu magna non, ullamcorper porta tortor. Nulla scelerisque varius velit eu blandit. Donec a erat rutrum, viverra est non, aliquet dui. Phasellus eros ipsum, pulvinar vitae metus elementum, feugiat imperdiet enim. Quisque id nibh diam. Pellentesque sit amet ipsum consequat, cursus mauris quis, elementum mi. Cras maximus eros sed purus suscipit faucibus. Ut felis mi, posuere vitae sapien tempor, pulvinar auctor neque. Nunc id viverra dui. In hac habitasse platea dictumst. Proin varius arcu sit amet auctor fringilla. In dictum pulvinar est, vitae tincidunt magna dignissim ac. Nunc aliquam arcu at eleifend facilisis.

文字強制斷行 word-break: break-all;

文字強制斷行會破壞單字結構,閱讀上有詞意不完整的風險,好處是字距統一且左右對齊。
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit enim, vulputate eu magna non, ullamcorper porta tortor. Nulla scelerisque varius velit eu blandit. Donec a erat rutrum, viverra est non, aliquet dui. Phasellus eros ipsum, pulvinar vitae metus elementum, feugiat imperdiet enim. Quisque id nibh diam. Pellentesque sit amet ipsum consequat, cursus mauris quis, elementum mi. Cras maximus eros sed purus suscipit faucibus. Ut felis mi, posuere vitae sapien tempor, pulvinar auctor neque. Nunc id viverra dui. In hac habitasse platea dictumst. Proin varius arcu sit amet auctor fringilla. In dictum pulvinar est, vitae tincidunt magna dignissim ac. Nunc aliquam arcu at eleifend facilisis.
  • 平台:MerxSmart,MerxMotion
  • 模組:無
  • 更新日期:2018/05
友善列印版本

網站/客戶/社群 三方連結
帶來良好的循環與溝通

在電腦前直接完成購物,
付款快速又便利
不需人工聯繫購買人,
系統自動發送信件

網址快速串接,
網站上線時間自己決定

帳務全面自動化,
線上查詢超方便

世界各地皆有據點,
平穩又快速

主機不用自己管理,
資訊安全由我們為您把關

網站上線後續服務,
交由摩智超省時