文本溢出后，自动转成...

让文本实现溢出后实现（...）主要是三个样式：

   white-sapace:nowrap是文本强制不换行；

   overflow：hidden 溢出文本隐藏；

    text-overflow：ellipsis 溢出部分省略；

.text1 {
    width: 200px;
    padding: 5px;
    border: 1px solid black;
    line-height: 20px;
}
.text2 {
    width: 200px;
    padding: 5px;
    border: 1px solid black;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="text">
    <h1>没有应用样式</h1>
    <div class="text1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam asperiores aut
        dignissimos distinctio
        error explicabo fugit hic id ipsum modi molestiae nam nemo omnis quidem quos, repellat, saepe voluptas!
    </div>
    <h1>应用了样式</h1>
    <div class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam asperiores aut
        dignissimos distinctio
        error explicabo fugit hic id ipsum modi molestiae nam nemo omnis quidem quos, repellat, saepe voluptas!
    </div>
</div>

实现的效果：