css不換行、超出省略、超行自動縮小行高

【不換行】

white-space: nowrap;

【超出長度顯示省略號】

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

【超行自動縮小行高】

<div class="father">
    <span class="child"><span>
</div>

.father {
  height: 1.4rem;
  line-height: 1.4rem;  
}
.child {
  display: inline-block;  
  line-height: 0.7rem; 
  vertical-align: middle;
}

 示例