文字溢位後,自動轉成...
阿新 • • 發佈:2018-11-10
讓文字實現溢位後實現(...)主要是三個樣式:
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>
實現的效果: