div css 多行文本 最后一行自动显示省略号

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

解决方案 »

  1.   

    微博的做法是直接over-flow:hidden，然后在最后，覆盖一张...的透明PNG的。
      

  2.   

    楼上能否给个页面？
    （如果只显示一行，那个png就不用了吧？如何判断要不要加png）
      

  3.   

    以前在手机版的微博看过，现在改版了，没有这种效果了。他也是有判断字数的，当超过一定字数，例如比三行多吧。就会用css在<div>的右下角铺一张半透明的... png
      

  4.   

    比如内容456个字一行100个字，那么就是计算出一共5行，最后一行56个字。然后str.substring(-1,56)，把倒数的56个字截掉，再加上省略号就可以了但是要注意中英文字符间的计算差异。
      

  5.   

    div relative定位定高定宽，内部放个个浮动层浮动在右下角，内容为...覆盖最后的文字，不过最后显示的一个文字有可能被遮盖住，漏点出来<style>
    .ellips{position:relative;width:100px;height:60px;line-height:20px;overflow:hidden;background:#eee}
    .ellips .dot{position:absolute;right:0px;bottom:0px;height:20px;background:#fff}
    </style>
    <div class="ellips"><div class="dot">...</div>div relative定位定高定宽，内部放个个浮动层浮动在右下角字</div>
      

  6.   

    <body>
    <div id='view' style='width:200px;height:70px;overflow:auto'></div>
    <script>
    s = '条件：<br>\
    div   css  javascript  html<br>\
    如何实现多行文本中最后一行文本最后自动显示省略号（如三行文本，文本自动换行后，第三行很长，自动显示省略号）';el = document.getElementById('view');
    n = el.offsetHeight;
    for(i=10; i<s.length; i++) {
      el.innerHTML = s.substr(0, i);
      if(n <= el.scrollHeight) break;
    }
    el.style.overflow = 'hidden';
    el.innerHTML = s.substr(0, i-3) + '...';</script>
      

  7.   

    用CSS3可以实现多行时，最后一行用省略号截取，在youtube上见到过。不过对于老版本浏览器就难于兼容了还可以看一下这里：http://www.zhangxinxu.com/wordpress/?p=230
      

  8.   

    div{display: -webkit-box;text-overflow: ellipsis;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}-webkit-line-clamp: 3;这个设置为显示3行，超过3行则最后用省略号代替，目前在移动设备上使用正常。