在CSS3中，常用的文本属性text-overflow:clip|ellipsis|string,分别是修剪文本、显示省略号，用指定文本代替（当前浏览器不支持），经常在文本或新闻的摘要中使用，还有一些英文文档中，设置文本超出边界时是否换行。
效果图如下：
css样式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<style type="text/css"> /*设置默认样式*/ div { height: 100px; width: 200px; border: 1px solid #000; margin: 10px; } /*文本不换行，超出部分用...表示*/ .div1 { overflow: hidden; /*超出文本隐藏*/ white-space: nowrap; /*强制文本一行内显示*/ text-overflow: ellipsis; } /*文本直接切*/ .div2 { overflow: hidden; white-space: nowrap; text-overflow: clip; } /*指定文本垂直方向显示5行，超出部分用...代替*/ .div3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } /*在长单词文本内部进行换行*/ .div4{ word-wrap: break-word; } </style> |
html样式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<h2>text-overflow: ellipsis</h2> <div class="div1"> 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 </div> <h2>text-overflow: clip</h2> <div class="div2"> 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 </div> <h2>-webkit-line-clamp: 5</h2> <div class="div3"> 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 </div> <h2>word-wrap: break-word</h2> <div class="div4"> My favorite sport is basketballllllllll. I often play basketball with my classmates after school and play with my friends on weekends. I like playing basketball because it can make me strong and health. When I play basketball, I forget all my worries and I can make lots of friends who have the same interest. In the evening when I finish doing my homework </div> |