首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

如何用CSS实现多行文本的省略号显示(4)

如何用CSS实现多行文本的省略号显示(4)

6th 隐藏
之前的实现中在文本未溢出的情况下,realend元素会出现在父元素的右侧,正如。


解决此问题很简单,急需要设置:
  • .ellipsis{

  •     overflow:hidden;

  • }
即可解决问题。
7th 大功告成
现在我们离完结就差一步了,即去掉各元素的背景色,并且用“…”替换文本。最后为了优化体验,采用渐变来隐藏“…”覆盖的文本,并设置了一些兼容性的属性。
到了此处,相信现在关心的只是CSS的代码了:
  • .ellipsis {

  •   overflow: hidden;

  •   height: 200px;

  •     line-height: 25px;

  •     margin: 20px;

  •     border: 5px solid #AAA; }



  • .ellipsis:before {

  •     content:"";

  •     float: left;

  •     width: 5px; height: 200px; }



  • .ellipsis > *:first-child {

  •     float: right;

  •     width: 100%;

  •     margin-left: -5px; }         



  • .ellipsis:after {

  •     content: "\02026";   



  •     box-sizing: content-box;

  •     -webkit-box-sizing: content-box;

  •     -moz-box-sizing: content-box;



  •     float: right; position: relative;

  •     top: -25px; left: 100%;

  •     width: 3em; margin-left: -3em;

  •     padding-right: 5px;



  •     text-align: right;





  •         background-size: 100% 100%;

  •   /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/

  • background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);



  •     background: -webkit-gradient(linear, left
    top, right
    top,

  •         from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));

  •     background: -moz-linear-gradient(to
    right, rgba(255, 255, 255, 0), white 50%, white);           

  •     background: -o-linear-gradient(to
    right, rgba(255, 255, 255, 0), white 50%, white);

  •     background: -ms-linear-gradient(to
    right, rgba(255, 255, 255, 0), white 50%, white);

  •     background: linear-gradient(to
    right, rgba(255, 255, 255, 0), white 50%, white);

  • }
总结之兼容性
从上文的实现细节来看,我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算,唯一存在兼容性问题的在于无关痛痒的渐变实现,因此可以在大多数浏览器下进行尝试。
继承事业,薪火相传
返回列表