css实现文字环绕图片且文本溢出省略

思路：外层盒子定义超出省略，里面图片盒子浮动
html结构部分

<div class="max-line">
      <div class="img-box">
        <img src="https://img95.699pic.com/xsj/2o/a0/78.jpg%21/fh/300">
      </div>
      <div>
        流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍
        流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍介绍流域介绍流域流域介绍
        流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍
        流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍流域介绍介绍流域介绍流域介绍流域流域介绍
      </div>
    </div>

样式部分

<style lang='scss'>
.img-box {
    float: left;
    clear: both;
    height: 180px;
    width: 300px;

    img {
      height: 180px;
      width: 300px;
    }
  }
  .max-line {
    //max-height: 400px;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: normal; //处理元素中的 空白
    display: -webkit-box;
    -webkit-line-clamp: 10;//行数
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 10;//行数
    -moz-box-orient: vertical;
    overflow-wrap: break-word;
    word-break: break-all;
  }
</style>

效果图如下：

如需图片居右，将float: left;改成float: right;即可