CSS 让超出DIV宽度范围的文字自动显示省略号… 和 位置固定

1,CSS 让超出DIV宽度范围的文字自动显示省略号…

.div{
font-family: ms sans serif, arial;
font-size: 8pt;
width: 100;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} 
 
关键是:text-overflow: ellipsis;

2,div显示固定在一个位置

.grd1 {width:316px; height:40px; position:relative;margin:0px;padding:0px;}
.grd1 a{position: absolute; top:18px; left:266px;}
<div class="grd1">{{$item->txt_body|mb_strimwidth:0:75:"…"}}
<a href="http://www.huaidong.net/" target="_blank">查看全文</a>
</div>
 
说明:“查看全文”位置固定是相对txt_body的

相关内容:

Leave a comment

11 Comments.

  1. 简洁的技术类博客 支持

  2. 链接已做好,以前学过网页设计后私事而放弃,学PHP语言容易吗?我也很想学。

  3. 呵呵,来踩踩。。。
    好像是只有IE支持吧,对于FF 只能 用hidden了。

  4. 你好路过,顺便给你踩踩。

  5. 顺便给你踩踩。

  6. 不仅text-overflow: ellipsis;是关键,overflow: hidden; white-space: nowrap;也是关键,还有做Firefox下不会有省略号。

  7. 读者墙那样的效果 如何用css约束其行数 和列数,求教

发表评论

您的电子邮箱不会被公开。 标记为 * 的区域必须填写

*


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

有人回复时邮件通知我