文字超出隐藏显示...

// 多行隐藏
<div class="ov">
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
    </div>
    
<style>
.ov{
  width: 300px;
  height:105px;
  background: red;
/* 在恰当的断字点进行换行 */
  word-break: break-all;
  /* 超出范围隐藏 */
  overflow: hidden;
  /* 文字超出用省略号 */
  text-overflow: ellipsis;
  /* 盒子模型 */
  display: -webkit-box;
  /* 显示的文本行数 */
  -webkit-line-clamp: 5;
  /* 子元素的垂直排列方式 */
  -webkit-box-orient: vertical;
}
</style>

// 单行隐藏
<div class="ov">
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
      我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
    </div>
    
<style>
.ov{
  width: 300px;
  height:105px;
  background: red;
/* 文本不换行 */
  white-space: nowrap;
  /* 超出范围隐藏 */
  overflow: hidden;
  /* 文字超出用省略号 */
  text-overflow: ellipsis;
}
</style>