radio 在小屏幕下选项内容溢出不换行，如何解决，求帮忙

Question

问题描述

radio 在小屏幕下选项内容溢出不换行，如何解决，求大神帮忙

问题出现的环境背景及自己尝试过哪些方法

循环出来的数据，但是选项在小屏幕下，不会换行，直接溢出了，试了用css属性word-wrap: break-word;word-break: break-all;也不可以

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
html部分
<div v-for="(item,index) in question.xt" :key="index">

<div class="font-110">{{index+1}}、{{item.title}}</div>
    <div v-for="(itm,idx) in item.xx" :key="idx">
        <div v-if="item.option===1">
            <el-radio-group v-model="form.wjdc[item.id]" class="wrap">
                <el-radio :label="itm.id">{{itm.title}}</el-radio>
            </el-radio-group>
        </div>
        <div v-else-if="item.option===2">
            <el-checkbox-group v-model="form.wjdc[item.id]" class="wrap">
                <el-checkbox :label="itm.id">{{itm.title}}</el-checkbox>
            </el-checkbox-group>
        </div>
      </div>
</div>

</div>

效果图

你期待的结果是什么？实际看到的错误信息又是什么？

希望选项超过宽度自动换行

Answer 1

已解决，目前使用的方式是在小屏幕下width: 100%;text-overflow: ellipsis;white-space: normal;换行