隐藏文字超出部分 隐藏部分省略号
文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法
一是用程序开截取字符长度,这个其实也是可以的,省略号:
text-overflow:ellipsis;-o-text-overflow:ellipsis;
第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧,
css样式如下:
.css1{ color:#6699ff;border:1px#ff8000dashed; margin-bottom:20px; width: 20em;/*不允许出现半汉字截断*/ } .css2{ overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/ width: 20em;/*不允许出现半汉字截断*/ color:#6699ff;border:1px#ff8000dashed; }
html代码如下:
<divclass="css1">Web前端开发 - 专注于网站前端设计与Web用户体验</div> <divclass="css2">Web前端开发 - 专注于网站前端设计与Web用户体验</div>
<style type=”text/css”> .css1{ color:#6699ff;border:1px #ff8000 dashed; margin-bottom:20px; width: 20em;/*不允许出现半汉字截断*/ } .css2 { overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/ width: 20em;/*不允许出现半汉字截断*/ color:#6699ff;border:1px #ff8000 dashed; } </style> <div class=”css1″>Web前端开发 – 专注于网站前端设计与Web用户体验</div> <div class=”css2″>Web前端开发 – 专注于网站前端设计与Web用户体验</div> <p>
推荐栏目
本站推荐
百度站内搜索
Copyright © 2007-2014 海鬼 保留所有权利.
无心无力无时间来进行无用的备案
Theme by 海鬼 坚持不一定胜利 也许你在南辕北辙!