CSS-文本溢出省略号表示】的更多相关文章

一行: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; 两行: width: 215px;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 这里是超出几行省略 */overflow…
单行溢出显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行溢出显示省略号: text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; //此处数字意思是最多显示几行 -webkit-box-orient: ver…
.ellip{ display: block; width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }…
1. 单行文本溢出省略号效果 .ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } <div class="ellipsis"> 这时我看见他的背影,我的泪很快地流下来了.我赶紧拭干了泪.怕他看见,也怕别人看见.我再向外看时,他已抱了朱红的橘子往回走了.过铁道时,他先将橘子散放在地上,自己慢慢爬下,再抱起橘子走.到这边时,我赶紧去搀他.他和我走到车上,将橘子一股脑儿放在我的皮大衣…
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Typ…
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; //将元素设为盒子伸缩模型显示 -webkit-box-orient: vertical; //伸缩方向设为垂直方向 -webkit-line-clamp: 1; //超出3行隐藏,并显示省略号 } /* 文本2行…
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 示例 文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号 多行 1.直接用css属性设置(只有-webkit内核才有作用) 语法 overflow: hidden; text-ov…
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     overflow: hidden;//文本溢出隐藏     text-overflow: ellipsis;//文本溢出显示省略号     white-space: nowrap;//不换行 } 二. 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号 在webkit内核中,可以利用-webkit-…
{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } text-overflow 属性规定当文本溢出包含元素时发生的事情. clip:修剪文本.ellipsis:显示省略符号来代表被修剪的文本.string:使用给定的字符串来代表被修剪的文本. white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的.…
box-shadow: 20px 20px 55px #777; // div阴影效果 filter:alpha(opacity=60) //设置透明度为60 opacity:0.6 //非IE浏览器下设置透明度为60% border-radius: 6px; //向div设置圆角边框 使用表格,文字超出部分用省略号代替 table{ table-layout:fixed; } td{ border-top-style:dashed; //虚线 border-width:1px; width:1…