右面文字不包裹图片

页面元素

 <div className={styles.imgWords_nowrap}>
    <div className={styles.imgWords_img_wrapper}>
        <img src={defaultPerson} width="136" />
        <p>111111111111111111111</p>
    </div>
    <div className={styles.imgWords_words_wrapper}>
        <p>111</p>
        <p>111</p>
        <p>111111</p>
        <p>111111</p>
    </div>
</div>

样式

.imgWords_nowrap{
  display: flex;
  width: 400px; // 为了显示文字缩略效果，给定宽度1
  background-color: #0aa092;
  p{
    line-height: 1.5;
    text-indent: 0em; //首行缩进字符
    margin: 0 0 0 0; // 覆盖代理样式
  }
  .imgWords_img_wrapper{
    width: 136px;
    p{
      word-break: break-all; //超过宽度换行
      text-align: center;
    }
  }
  .imgWords_words_wrapper{
    margin: 0 0 0 20px;
    overflow: hidden; // 为了显示文字缩略效果，外围容器的宽度不能被子元素撑开2
    p{ // 显示文字缩略效果3
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p:not(:first-child){
      font-size: 16px;
      color: #808080;
    }
    p:first-child{
      font-size: 20px;
      font-weight: 500;
    }
  }
}

右面文字包裹图片

页面元素

<div className={styles.imgWords_wrap}>
    <div className={styles.picWrapper}>
        <div className={styles.pic} style={{ background: `url(${defaultPerson}) top left / contain no-repeat` }}> </div>
        <p>茅盾（1896—1981）</p>
    </div>
    <div className={styles.pContentWrapper}>
        <div className={styles.pHead}>茅盾</div>
        <p>  茅盾，原名沈德鸿，字雁冰，现代作家、社会活动家。</p>
        <p>  茅盾，原名沈德鸿，字雁冰，现代作家、社会活动家。</p>
    </div>
</div>

样式

.imgWords_wrap{
  margin-top: 44px;
  min-height: 260px;
  border-bottom: 1px solid #E0E0E0;
  p{ 
      line-height: 1.5;
      font-size: 16px;
      margin: 0 0 0 0; // 覆盖代理样式 
  }
}
.picWrapper{
  width: 164px;
  float: left;
  margin: 0 28px 10px 0;
}
.pic{
  width: 164px;
  height: 220px;
  p{
      font-size: 14px;
      color: #808080;
      text-align: center;
  }
}
.pContentWrapper{
  p{
    text-indent: 2em; //首行缩进字符
  }
}
.pHead{
  margin-bottom: 6px;
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #262626;
}