讓文字實現溢位後實現（...）主要是三個樣式：

   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>

實現的效果：