Css实现文字超出部分省略号显示，鼠标移入显示全部

没有设置相应的css属性前

设置相应属性之后

Html部分

 <span class="test_text" title="此时已莺飞草长 爱的人正在路上
我知他风雨兼程 途经日暮不赏
穿越人海 只为与你相拥">
        此时已莺飞草长 爱的人正在路上
        我知他风雨兼程 途经日暮不赏
        穿越人海 只为与你相拥
      </span>

title属性是在鼠标放到这个文本上会显示出来
Css部分

 .test_text {
    display: block;
    width: 200px;
    height: 200px;
    line-height: 30px;
    background-color: aquamarine;
    text-align: left;
    text-overflow: ellipsis;
    // 文本溢出属性指定应向用户如何显示溢出内容
    // ellipsis是省略的意思
    overflow: hidden;
    // overflow 属性规定当内容溢出元素框时发生的事情。
    // hidden   内容会被修剪，并且其余内容是不可见的。
    white-space: nowrap;
    // 规定段落中的文本不进行换行：
  }