文本超出换行添加white-space:wrap无效

 场景描述：

        在vue项目中，在Modal弹窗里面使用Form表单组件，然后在FormItem里面放一个div标签用来装文字内容。有时会出现内容超出Form表单宽度但是不换行的问题。

解决方法：

给div设置样式，例如：
.text-container{
  word-break: break-all;
  word-wrap: break-world;
  white-space: wrap;
}

代码：

<Modal
title="详情"
width="600"
:footer-hide="true"
v-model="showModal"
>
<Form :label-width="120" :model="formData" style="height: 50vh; overflow-y: scroll">
  <FormItem label="文字">
    <div class="text-container">{{formData.content}}</div>
  </FormItem>
</Form>
</Modal>

 补充文本超出显示省略号...：

单行文本超出长度显示省略号...：
.text-ellipsis{
  width: 100%; //或者固定宽度
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

多行文本超出长度显示省略号...：
.text-ellipsis{
  width: 100%;
  overflow: hidden;
  -webkit-line-clamp: 3; //行数，语句限制显示文本的行数
  display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
  -webkit-box-orient: vertical; // 设置伸缩盒对象的子元素的排列方式；
}

 

参考链接：

       https://segmentfault.com/a/1190000040981038