css 文字溢出设置省略号，文字长度超出部分自动变成省略号展示

1、单行文本

html代码：

<div>赏金验证实力，最强NBA适合最NB的你！ 炫酷特效 无限可能 ！</div>

css代码：

div{ 
    width:200px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap; 
}

注意事项：
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 这三个属性一定要同时设置。
一定要给容器设置宽度。
如果是表格样式，table，文字内容过多不想换行。则必须给table设置属性：table-layout:fixed;只有设置了这个属性，tb才能设置。

2、多行文本

html代码：

<div class="bottom">
    <div>
     腾讯首款NBA正版授权的竞技动作篮球手游，真实还原现役与名人堂传奇NBA球星形象，完美复刻经典动作。真实现场大牌解说，再现巅峰对决的时刻。
     经典对决 极速秒配 *匹配，快速开局！流畅的实时竞技，让NBA的经典对决，在你我之间爆发！ 好友开黑 团队荣耀 随时随地与好友开黑比赛，
     在手机的战场上挥洒青春与热血，阳光耍帅，要自信，要“最强”！ 丰富模式 大作风范 三五分钟来场比赛，携手挑战顶峰，闯关锻炼身手，
     赏金验证实力，最强NBA适合最NB的你！ 炫酷特效 无限可能 游戏世界里NBA更酷炫，各路高手齐聚殿堂，期待在游戏中的炫酷表现！
    </div>
</div>


css代码：

.bottom{
    height:63px;
}
.bottom div{
    font-size:15px;
    color:rgba(119,119,119,1);
    line-height:21px;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;//设置行数
    word-break: break-all;
    overflow: hidden;
}

注意事项：
1、必须父元素设置固定高度
2、子元素放置内容设置样式