跳到主要內容

文字對齊、左右均分對齊、英文強迫斷行&不斷行,中文強迫不換行

中文字左右均分對齊
text-align:justify; /* 通用一般瀏覽器 */
text-justify: distribute-all-lines; /* 適用ie,可以不用加 */

強迫英文斷行(若一個單字過長,超過畫面的寬度,則將單字切斷,並換行)
word-wrap: break-word;
word-break: break-all;


文字強迫換行 word-break: break-all;
依單字換行 word-wrap:break-word;
死都不換行 white-space:nowrap; /* 可設定於表格內 */

區塊元件內的文字左右均分對齊

div.justify {
 text-align: justify;
 text-justify: inter-ideograph;
 -ms-text-justify: inter-ideograph; /*IE9*/
 -moz-text-align-last:justify; /*Firefox*/
 -webkit-text-align-last:justify; /*Chrome*/
}
div.justify:after {
 content: '';
 display: inline-block;
 width: 100%;
}

另外如果想要讓一個區塊內的一行文字第一個在最左、最後一個在最右,可以用:
text-align:justify; 
text-align-last:justify; 
text-justify: distribute-all-lines; /* 兼容IE */