浅谈CSS实现单、多行文本溢出时显示省略号_iview table 超出部分省略号-CSDN博客

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53730320

1、单行文本溢出：

(1)截断溢出文本：

---同时设置以下属性：

width:*px;
overflow: hidden;
text-overflow:clip;
white-space: nowrap;

(2)溢出文本显示省略号：

---同时设置以下属性：

width:*px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2、多行文本溢出：

同时设置以下属性：

width:*px;
display:-webkit-box;
overflow:hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:*;

-webkit-line-clamp用来限制在一个块元素显示文本的行数，需要结合WebKit属性display: -webkit-box和-webkit-box-orient属性。

实现效果：

源代码：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            .oneLineEllipsis {  
				width:500px;
				border:1px solid red;
                overflow:hidden;  
                white-space:nowrap;  
                text-overflow:ellipsis; 
            }  
            .oneLineClip {  
				width:500px;
				border:1px solid red;
                overflow:hidden;  
                white-space:nowrap;  
                text-overflow:clip; 
            }  
            .multiLineEllipsis {  
				width:500px;
				border:1px solid red;
                display:-webkit-box !important;  
                overflow:hidden;  
                -webkit-box-orient:vertical;  
                -webkit-line-clamp:3;  
            }  
        </style>  
    </head>  
    <body>  
        <p class="oneLineEllipsis">
			前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
		</p>
        <p class="oneLineClip">
			前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
		</p>
		<p class="multiLineEllipsis">
			前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
		</p>
	</body>  
</html>