css3--單行、多行文本溢出

<style>
.div1 {
    width: 200px;
    height: 200px;
    background: red url(img/user.png) no-repeat;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.div1:hover {
    overflow: visible;
    text-overflow: inherit;
}
                
</style>

<div class="div1">
        qwe Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae voluptatem sapiente fuga facere molestias numquam officiis beatae ex sit atque aspernatur quisquam commodi ratione perspiciatis ducimus dolor minima itaque obcaecati!
</div>

 

CSS實現單行、多行文本溢出顯示省略號

方法一：只顯示3行，在第三行結尾顯示...

p{display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}

方法二：適用性更廣，未超出部分也會出現...

p{
  position: relative;
  line-height: 20px; 
  max-height: 40px; /*是行高的整數倍，防止下行文字露出*/
  overflow: hidden;
}

p::after{
  content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}