SOURCE

<div class="father">
	<!-- 块级元素 -->
	<p class="son p">sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大无
	</p>

	<h4 class="h">sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大 sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大 sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大
	</h4>

	<div class="div">sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大 sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大 sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大
	</div>
    
	<!-- 行内元素 -->
	<span class="span"> sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大
         sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大
          sad哇大所大无多所多付撒大大无sad哇大所大无多所多付撒大大
    </span>
   
</div>

.father {
    width: 200px;
    height: 100px;
    background-color: pink;
}

.p {
    font-size: 20px;
    /* 让文字不换行，强制溢出 */
    white-space: nowrap;
    /* 溢出省略 */
    overflow: hidden;
    /* 溢出显示省略号... */
    text-overflow: ellipsis;
    color: red;
}

.h {
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: yellow;
}

.div {
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: green;
}
/* 行内元素 */
.span {
      font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: orange;
}