标签：
|
1
|
text-overflow:clip | ellipsis; |
clip：剪切多余的文字。
ellipsis：文本溢出时显示省略标记。
要实现文本溢出剪切显示省略标记，还需要两个属性的配合，并定义文本容器宽度。
|
1
2
3
|
text-shadow:ellipsis;white-space：nowrap; //强制文本在一行显示overflow:hidden; //溢出内容隐藏 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{padding: 0;margin: 0;} 8 .clearfix:before,.clearfix:after{ 9 display: table;content: ""; 10 } 11 .clearfix:after{ 12 clear:both; 13 overflow:hidden; 14 } 15 a:link{text-decoration: none;} 16 a:hover{text-decoration: underline;color:#f30} 17 .wrap{ 18 width: 350px; 19 margin: 30px auto; 20 } 21 .wrap dl{ 22 width: 350px; 23 border:1px solid #00CCCC; 24 border-radius: 8px; 25 box-shadow: 5px 5px 5px #008000; 26 } 27 .wrap dt{ 28 height: 2em; 29 line-height: 2em; 30 padding-left: 5px; 31 color: #000; 32 font-weight: bold; 33 -webkit-border-left-top-radius:8px; 34 -moz-border-left-top-radius:8px; 35 border-top-left-radius:8px; 36 -webkit-border-right-top-radius:8px; 37 -moz-border-right-top-radius:8px; 38 border-top-right-radius:8px; 39 } 40 .wrap dd{ 41 margin: 8px auto; 42 font-size: 16px; 43 } 44 .wrap ul{ 45 list-style: none outside none; 46 padding-left: 24px; 47 background: url(../img/bg.png) no-repeat 2px 3px; 48 } 49 .wrap li { 50 51 display: inline; 52 } 53 .wrap li a{ 54 width: 220px; 55 float: left; 56 overflow: hidden; 57 text-overflow: ellipsis; 58 white-space: nowrap; 59 } 60 .wrap span{ 61 float: right; 62 padding-right: 5px; 63 } 64 </style> 65 </head> 66 <body> 67 <div class="wrap clearfix"> 68 <dl> 69 <dt>今日热点</dt> 70 <dd> 71 <ul class="clearfix"> 72 <li><a href="http://www.cnblogs.com/staven/">访美首站为何选在西雅图？</a><span>2015-09-17</span></li> 73 <li><a href="http://www.cnblogs.com/staven/">三项目受关注：中国参建美高铁 中国领袖亮相联合国</a><span>2015-09-17</span></li> 74 <li><a href="http://www.cnblogs.com/staven/">美甲师用得着政府发证吗？竟然还细分五级！</a><span>2015-09-17</span></li> 75 <li><a href="http://www.cnblogs.com/staven/">男孩带闹钟上学被当炸弹 奥巴马：来白宫玩吧</a><span>2015-09-17</span></li> 76 </ul> 77 </dd> 78 </dl> 79 </div> 80 81 </body> 82 </html>
|
1
|
word-wrap:normal | break-word; |
normal:：默认值。浏览器只在半角空格或连字符的地方进行换行。
break-word:将内容在边界内换行。应用在<pre>和<table>中，没有任何效果。
|
1
|
word-break:normal | break-all | keep-all; |
normal:默认值。
break-all：可以强行截断英文单词，达到词内换行效果。
keep-all：不允许断开。
while-space:
|
1
|
white-space:normal | pre | nowrap | pre-line | pre-wrap | inherit |
normal：默认值。
pre：文本空白处会被浏览器扣留。
nowrap：文本不换行，文本会在同一行上，直到碰到换行标签<br/>为止。
pre-line：合并空白符序列，但保留换行符。
pre-wrap：保留空白符序列，但是正常进行换行。
inherit：继承元素的white-space属性值。
1) pre标签自动换行
|
1
2
3
4
5
6
7
8
9
|
pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS2.1 */ white-space: pre-line; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */} |
2) 单元格(td)自动换行
|
1
2
3
4
5
6
7
8
|
table{ table-layout: fixed; width: ***px;}table td{ overflow: hidden; word-wrap: break-word;} |
3) 除pre、td标签外其他标签自动换行
|
1
2
3
4
|
element{ overflow: hidden; word-break: break-word;} |
4) 标签内容强制换行
|
1
2
3
4
|
element{ white-space: nowrap; word-break: keep-all;} |
word-wrap，当其取值为break-word时，强制换行，中英文文本都无任何问题，但是对于长串的英文不起作用。也就是说break-word只能断词，不是来断字符的。
word-break：当属性值为break-all时，可允许非亚洲语言文本的任意字符断开。当属性值为keep-all时表示在中文、韩文、日文中是不允许断开的。
white-space：具有文本格式化作用，当属性值为nowrap时，表示文本强制不换行；当取值为pre时，表示显示预定义文本格式。
标签：
原文地址：http://www.cnblogs.com/staven/p/64ad05f8e8cb15af74ee18e36633bb8e.html
