<style>
? ? ? ? .box1 {
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 80px;
? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? /* 文字顯示不開(kāi)自動(dòng)換行 */
? ? ? ? ? ? /* white-space: normal; */
? ? ? ? ? ? /* 文字顯示一行 */
? ? ? ? ? ? white-space: nowrap;
? ? ? ? ? ? /* 溢出的部分隱藏起來(lái) */
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? /* 文字溢出的時(shí)候用省略號(hào)代替 */
? ? ? ? ? ? text-overflow: ellipsis;
? ? ? ? }
? ? ? ? .box2 {
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 80px;
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? /* 溢出的部分隱藏起來(lái) */
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? /* 文字溢出的時(shí)候用省略號(hào)代替 */
? ? ? ? ? ? text-overflow: ellipsis;
? ? ? ? ? ? display: -webkit-box;
? ? ? ? ? ? /* 文字行數(shù) */
? ? ? ? ? ? -webkit-line-clamp: 2;
? ? ? ? ? ? /* ?排列方式 */
? ? ? ? ? ? -webkit-box-orient: vertical;
? ? ? ? }
? ? </style>
? ? <!-- 1.顯示一行 （必須定義盒子高寬）-->
? ? <div class="box1">
? ? ? ? 我就顯示一行，其他省略一萬(wàn)字。
? ? </div>
? ? <!-- 2.顯示多行 （必須定義盒子高寬）-->
? ? <div class="box2">
? ? ? ? 我就可以顯示2行或者3行，其他省略一萬(wàn)字其他省略一萬(wàn)字。
? ? </div>
