<TABLE style="table-layout: auto | fixed"> 使用:style="word-break : break-all;" 对于在英文ä¸ä½¿ç”¨,请ä‹É用style="table-layout:fixed; word-wrap:break-word" ============================================================================== word-wrapåŒword-break的区åˆ?/span> word-wrap: word-break: æ€È»“如下åQ?br /> word-wrap是控制æ¢è¡Œçš„ã€?br /> 使用break-wordæ—Óž¼Œæ˜¯å°†å¼ºåˆ¶æ¢è¡Œã€‚䏿–‡æ²¡æœ‰ä“Q何问题,英文è¯å¥ä¹Ÿæ²¡é—®é¢˜ã€‚但是对于长串的英文åQŒå°±ä¸è“v作用ã€?/span> break-wordæ˜¯æŽ§åˆ¶æ˜¯å¦æ–è¯çš„ã€?br /> normal是默认情况,英文å•è¯ä¸è¢«æ‹†å¼€ã€?br /> break-allåQŒæ˜¯æ–å¼€å•è¯ã€‚在å•è¯åˆ°è¾¹ç•Œæ—¶åQŒä¸‹ä¸ªå—æ¯è‡ªåŠ¨åˆ°ä¸‹ä¸€è¡Œã€‚ä¸»è¦è§£å†³äº†é•¿ä¸²è‹±æ–‡çš„问题ã€?br /> keep-allåQŒæ˜¯æŒ‡Chinese, Japanese, and Korean䏿–è¯ã€‚å³åªç”¨æ¤æ—¶åQŒä¸ç”¨word-wrapåQŒä¸æ–‡å°±ä¸ä¼šæ¢è¡Œäº†ã€‚(英文è¯å¥æ£å¸¸ã€‚)
ff下: ç›®å‰ä¸»è¦çš„问题å˜åœ¨äºŽ 长串英文 å’?英文å•è¯è¢«æ–开。其实长串英文就是一个比较长的å•è¯è€Œå·²ã€?br /> 匙‹±æ–‡å•è¯åº”ä¸åº”该被æ–开那?那问题很明显了,昄¡„¶ä¸åº”该被æ–开了ã€?br /> 对于长串英文åQŒå°±æ˜¯æ¶æ„的东西åQŒè‡ªç„¶ä¸ç”¨åŽ»½Ž¡äº†ã€‚ä½†æ˜¯ï¼Œä¹Ÿè¦æƒ³äº›åŠžæ³•åQŒä¸è®©å®ƒæŠŠå®¹å™¨æ’‘大ã€?br /> 用:overflow:auto; ie下,长串会自动折行。ff下,长串会被é®ç›–ã€?/p>
å¦ï¼Œ‹¹‹è¯•代ç 如下åQ?/p> 1.htm=================================================================== <style> .c1{ width:300px; border:1px solid red} <br> <br> <br> <br> <br> <br> |
æ€È»“了一下,åªè¦åœ¨CSSä¸å®šä¹‰äº†å¦‚下å¥ååQŒå¯ä¿ç½‘™åµä¸ä¼šå†è¢«æ’‘开了ã€?/p>
自动æ¢è¡Œé—®é¢˜,æ£å¸¸å—符的æ¢è¡Œæ˜¯æ¯”较åˆç†çš?而连¾l的数å—和英文嗽W¦å¸¸å¸¸å°†å®¹å™¨æ’‘大,æŒø™®©äººå¤´ç–?下é¢ä»‹ç»çš„æ˜¯CSS如何实现æ¢è¡Œçš„æ–¹æ³?/p>
对于div,p½{‰å—¾U§å…ƒç´?/p>
æ£å¸¸æ–‡å—çš„æ¢è¡?亚洲文å—å’Œéžäºšæ´²æ–‡å—)å…ƒç´ æ‹¥æœ‰é»˜è®¤çš„white-space:normal,当定义的宽度之åŽè‡ªåЍæ¢è¡Œ
html
<div id="wrap">æ£å¸¸æ–‡å—çš„æ¢è¡?亚洲文å—å’Œéžäºšæ´²æ–‡å—)å…ƒç´ æ‹¥æœ‰é»˜è®¤çš„white-space:normal,当定ä¹?lt;/div>
css
#wrap{white-space:normal; width:200px; }
IE‹¹è§ˆå™?/p>
˜qžç®‹çš„英文嗽W¦å’Œé˜¿æ‹‰ä¼¯æ•°å?使用word-wrap: break-word ;或者word-break:break-all;实现强制æ–行
html
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
css
#wrap{word-break:break-all; width:200px;}
或�
#wrap{word-wrap:break-word; width:200px;}
Firefox‹¹è§ˆå™?br /> ˜qžç®‹çš„英文嗽W¦å’Œé˜¿æ‹‰ä¼¯æ•°å—çš„æ–行,Firefox的所有版本的没有解决˜q™ä¸ªé—®é¢˜,æˆ‘ä»¬åªæœ‰è®©è¶…凸™¾¹ç•Œçš„å—符éšè—或è€?¾l™å®¹å™¨æ·»åŠ æ»šåŠ¨æ¡
html
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
css
#wrap{word-break:break-all; width:200px; overflow:auto;}
对于tableå…ƒç´
IE‹¹è§ˆå™?br />
1. 使用 table-layout:fixed;强制table的宽åº?多余内容éšè—<table style="table-layout:fixed" width="200"><tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td></tr></table>
å¤åˆ¶ä»£ç 2. 使用 table-layout:fixed;强制table的宽åº?内层td,th采用word-break : break-all;或者word-wrap : break-word ;æ¢è¡Œ <table width="200" style="table-layout:fixed;"><tr><td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890</td><td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
å¤åˆ¶ä»£ç 3.在td,thä¸åµŒå¥—div,p½{‰é‡‡ç”¨ä¸Šé¢æåˆ°çš„div,pçš„æ¢è¡Œæ–¹æ³?/p>
Firefox‹¹è§ˆå™?/p>
1. 使用 table-layout:fixed;强制table的宽åº?内层td,th采用word-break : break-all;或者word-wrap : break-word ;æ¢è¡ŒåQŒä‹É用overflow:hidden;éšè—‘…出内,˜q™é‡Œoverflow:auto;æ— æ³•èµ·ä½œç”?lt;table style="table-layout:fixed" width="200"><tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr></table>
å¤åˆ¶ä»£ç 2.在td,thä¸åµŒå¥—div,p½{‰é‡‡ç”¨ä¸Šé¢æåˆ°çš„对付Firefox的方法ã€?/p>
最佳CSS定义æ¢è¡Œä»£ç .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }
å¤åˆ¶ä»£ç 当然åQŒè¿™¿UçŽ°è±¡å‡ºçŽ°çš„å‡ çŽ‡å¾ˆå°åQŒä½†æ˜¯ä¸èƒ½æŽ’除网å‹çš„æ¶æžã€?
Springçš„applicationContext.xmlæ–‡äšg