css怎样让HTML中超出的内容显示为省略号

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法
第一种、用程序来截取字符长度，这个其实也是可以的。
第二种就是接下来分享的内容，用css样式来做,话也不多说，直接上代码吧：
HTML：

<div class="css1">Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<div class="css2">Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<div class="css3">Web前端开发 – 专注于网站前端设计与Web用户体验</div>

css：

.css1{
     color:#6699ff;
     border:1px solid #ff8000;
     margin-bottom:20px;
     width: 20em;/*不允许出现半汉字截断*/
 }
 .css2{
     overflow: hidden; /*自动隐藏文字*/
     text-overflow: ellipsis;/*文字隐藏后添加省略号*/
     white-space: nowrap;/*强制不换行*/
     width: 10em;/*不允许出现半汉字截断*/
     color:#6699ff;
     border:1px solid red;
 }

p{
    width: 100%;
    word-break: break-all;/*word-break: normal|break-all|keep-all;在恰当的断字点进行换行,break-all 允许在单词内换行,keep-all 只能在半角空格或连字符处换行,normal 使用浏览器默认的换行规则。*/
    text-overflow: ellipsis;/*溢出文字显示省略号*/
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
}

OK！谢谢阅读！！！