CSS实现文本超出区域换省略号

单行文本

		.single-box {
            width: 100px;
            /*设置超出部分隐藏*/
            overflow: hidden;
            /*设置内容不换行*/
            white-space: nowrap;
            /*设置超出部分变省略号*/
            text-overflow: ellipsis;
            background-color: #cccccc;
        }
		<div class="single-box">
        	<span>hello wellcom to here!</span> 
    	</div>

该方法只对块级元素中的行内元素起作用
若为

 <div class="single-box">
        <span>hello wellcom to here!</span> 
        <p>hello wellcom to here!</p>
 </div>

则会造成以下效果
此时只要给p 加上样式即可

多行文本

.more-box{
            width: 500px;
            height: 100px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            background-color: aqua;
        }
<div class="more-box">
        <span>hello hello hello wellcom to here!hello wellcom to here!hello wellcom to here!hello wellcom to here!hello wellcom to here!hello wellcom to here!hello wellcom to here!hello wellcom to here!</span> 
       
    </div>

该样式设置了超出三行部分用省略号代替，缺点是要设置高度为3行的高度，否则会将下一行的内容显示。