1.ä½ å®æ»è¡¨æ ¼ç宽度ï¼å³ç»è¡¨æ ¼ä¸ä¸ªå®½åº¦å¼(æ¯æ°å¼ï¼ä¸æ¯ç¾åæ¯)
2.强å¶ä¸æ¢è¡
div{
//white-spaceï¼ä¸æ¢è¡;normal é»è®¤;nowrap强å¶å¨åä¸è¡å
æ¾ç¤ºææææ¬ï¼ç´å°ææ¬ç»ææè
éé br 对象
white-space:nowrap; }
èªå¨æ¢è¡
div{
word-wrap: break-word;
//word-break设置强è¡æ¢è¡;normal äºæ´²è¯è¨åéäºæ´²è¯è¨çææ¬è§åï¼å
许å¨åå
æ¢è¡
word-break: normal;
}
强å¶è±æåè¯æè¡
div{
word-break:break-all;
}
3.æ»ç»äºä¸ä¸ï¼åªè¦å¨CSSä¸å®ä¹äºå¦ä¸å¥åï¼å¯ä¿ç½é¡µä¸ä¼å被æå¼äºã
table{table-layout: fixed;}
td(word-break: break-all; word-wrap:break-word;)
注éä¸ä¸ï¼
1.第ä¸æ¡table{table-layout: fixed;}ï¼æ¤æ ·å¼å¯ä»¥è®©è¡¨æ ¼ä¸æ!!!(æå¹å·)ä¹ç±»çå符æ¶èªå¨æ¢è¡ã
2.td{word-break: break-all}ï¼ä¸è¬ç¨è¿å¥è¿OKäºï¼ä½å¨æäºç¹æ®æ
åµä¸è¿æ¯ä¼æå¼ï¼å æ¤éè¦åå ä¸åé¢ä¸å¥(word-wrap:break-word;)å°±å¯ä»¥è§£å³ãæ¤æ ·å¼å¯ä»¥è®©è¡¨æ ¼ä¸çä¸äºè¿ç»çè±æåè¯èªå¨æ¢è¡ã
http://www.knowsky.com/(1)è¯æ³ï¼
word-break : normal | break-all | keep-all
åæ°ï¼
normal : ãä¾ç
§äºæ´²è¯è¨åéäºæ´²è¯è¨çææ¬è§åï¼å
许å¨åå
æ¢è¡
break-all : ã该è¡ä¸ºä¸äºæ´²è¯è¨çnormalç¸åãä¹å
许éäºæ´²è¯è¨ææ¬è¡çä»»æåå
æå¼ã该å¼éåå
å«ä¸äºéäºæ´²ææ¬çäºæ´²ææ¬
keep-all : ãä¸ææéäºæ´²è¯è¨çnormalç¸åã对äºä¸æï¼é©æï¼æ¥æï¼ä¸å
许åæå¼ãéåå
å«å°éäºæ´²ææ¬çéäºæ´²ææ¬
(2)è¯æ³ï¼
word-wrap : normal | break-word
åæ°ï¼
normal : ãå
许å
容顶å¼æå®ç容å¨è¾¹ç
break-word : ãå
容å°å¨è¾¹çå
æ¢è¡ãå¦æéè¦ï¼è¯å
æ¢è¡(word-break)ä¹è¡åç
说æï¼
设置ææ£ç´¢å½å½åè¡è¶
è¿æå®å®¹å¨çè¾¹çæ¶æ¯å¦æå¼è½¬è¡ã
对åºçèæ¬ç¹æ§ä¸ºword-wrapã请åé
æç¼åçå
¶ä»ä¹¦ç®ã
(3)è¯æ³ï¼
table-layout : auto | fixed
åæ°ï¼
auto : ãé»è®¤çèªå¨ç®æ³ãå¸å±å°åºäºååå
æ ¼çå
容ãè¡¨æ ¼å¨æ¯ä¸åå
æ ¼è¯»å计ç®ä¹åæä¼æ¾ç¤ºåºæ¥ãé度å¾æ
¢
fixed : ãåºå®å¸å±çç®æ³ãå¨è¿ç®æ³ä¸ï¼æ°´å¹³å¸å±æ¯ä»
ä»
åºäºè¡¨æ ¼ç宽度ï¼è¡¨æ ¼è¾¹æ¡ç宽度ï¼åå
æ ¼é´è·ï¼åç宽度ï¼èåè¡¨æ ¼å
容æ å
³
说æï¼
å¦ä½è®©è¡¨æ ¼èªå¨æ¢è¡?
设置ææ£ç´¢è¡¨æ ¼çå¸å±ç®æ³ã
对åºçèæ¬ç¹æ§ä¸ºtableLayoutã
4.æç
§ç½ä¸å¤§å¤æ°æç« ç说æ³ï¼åªè¦å¨CSSä¸å å
¥ï¼
代ç
..........
Code:
table {
table-layout:fixed;word-break:break-all;word-wrap:break-word;}
div{word-break:break-all;word-wrap:break-word;}
å°±å¯ä»¥è§£å³è¡¨æ ¼åå±è¢«æç ´ï¼æåæä¹æ¯è¿æ ·åçãä¸è¿è¿æ ·ç代ç ä¼é æä¸ä¸ªé®é¢ï¼ä½ ä¼åç°è±æè¯å
¨é¨è¢«æªæäºï¼è¿ä¸ç¬¦åè±è¯ç书åä¹ æ¯ä¹ä¸å©äºé
读ã
åæ¥æåç°ä¸è¿°ä»£ç æ¹åä¸ä¸å°±å¯ä»¥åå°æ¢é²æ¢è¡¨æ ¼/å±æç ´åé²æ¢åè¯æè£äºã
å¦ä¸ï¼
代ç
Code:
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}