文字内容超出容器显示省略号

单行文本

    
        
        
        
    
    
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam dolor totam architecto quidem nulla quas assumenda voluptatum! Eius enim ad atque magnam tempore impedit quisquam iste doloribus nihil odio ipsum.
    

必须同时设置三个属性 1. 不换行 2. 超出隐藏 3. 显示省略号

多行文本

• 移动端

// WebKit内核的浏览器 (非官方方案)

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

• JS 方案

// 下载及文档地址：https://github.com/josephschmitt/Clamp.js

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});