文字超出隱藏並顯示省略號

<br />
<style type="text/css">
.css1{
    color:#6699ff;border:1px #ff8000 dashed;
    margin-bottom:20px;
    width: 20em;/*不允許出現半漢字截斷*/
}
.css2 {
    overflow: hidden; /*自動隱藏文字*/
    text-overflow: ellipsis;/*文字隱藏后添加省略號*/
    white-space: nowrap;/*強制不換行*/
    width: 20em;/*不允許出現半漢字截斷*/
    color:#6699ff;border:1px #ff8000 dashed;
}
</style>
<div class="css1">Web前端開發 - 專注於網站前端設計與Web用戶體驗</div>
<div class="css2">Web前端開發 - 專注於網站前端設計與Web用戶體驗</div>
<p>