超出后显示省略号

<!DOCTYPE html>      
<html lang="en">      
<head>      
    <meta charset="UTF-8">      
    <title>超出后显示省略号</title>    
    <style type="text/css">
      body{margin: 0;background: #ddd;}
      .test{width:200px;height: 17px;line-height: 17px; font-size: 16px;border: 1px solid green; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
    </style>     
</head>      
<body>
  <div class="test">超出后显示省略号超出后显示省略号超出后显示省略号</div>
</body>      
</html>

超出后显示省略号

推荐阅读