内容超过宽度后显示省略号

<div class="demo">让我们荡起双桨，小船儿推开波浪，海面倒映着美丽的白塔，四周环绕着绿树红墙！</div>

<style>
      .demo{
         width:50px;
         border:1px solid pink;
         white-space:nowrap;
         text-overflow:ellipsis;
         overflow: hidden;
      }
</style>

显示如下：