Jeeeeeeeeen

text-overflow

June 30, 2015 | 1 Minute Read

省略号 dot-dot-dot

直接用字符串表示’…’ 或 用HTML实体表示 & hellip; 或 通过伪类 ::after实现

单行

通常方法

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

左右浮动和负margin

<div class="wrap">
	<div class="content"></div>
	<div class="dot"></div>
</div>
.wrap{ overflow: hidden;}
.wrap .content{ height: 20px; float: left; margin-right: 15px;}
.wrap .dot{ float: right; margin-top: -20px;}

多行

-webkit-line-clamp

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

脚本

function shorten(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    return ret;
}

参考

Jeeeeeeeeen © 2015