如何让文字超出div自动换行

Question

如何让文字超出，嵌套的盒子自动换行，而不是文字折行?
在父级上加了自动换行标签也不好使

  <div class="display" v-for="(item,index) in teacherdetail">
            <div class="show-item">
                <span class="label">班级编号：</span>
                <span class="content">{{item.number}}</span>
            </div>
             <div class="show-item">
                <span class="label">班级名称：</span>
                <span class="content">{{item.classname}}</span>
            </div>
             <div class="show-item">
                <span class="label">是否虚拟班：</span>
                <span class="content">{{item.isclass}}</span>
            </div>
             <div class="show-item">
                <span class="label"></span>
                <span class="content"></span>
            </div>
            <div class="show-item">
                <span class="label">年级：</span>
                <span class="content">{{item.class}}</span>
            </div>
             <div class="show-item">
                <span class="label">科目：</span>
                <span class="content">{{item.project}}</span>
            </div>
             <div class="show-item">
                <span class="label">校区：</span>
                <span class="content">{{item.campus}}</span>
            </div>
            
            .show-item{
            width: 25%;
            float: left;
            min-height: 40px; 
            font-size: 14px;
            word-wrap: break-word;
            word-break: normal;
            .label{
              font-weight: bold;
              color: #333333;
              display: inline-block;
              min-width: 100px;
              line-height: 30px;
            }
            .labels{
                width: 120px;
                font-weight: bold;
                color: #333333;
                display: inline-block;
                line-height: 30px;
            }
            .content{
                margin-left: 20px;
                line-height: 30px;
                min-height: 40px;
            }
          }

Answer 1

造成这个问题的原因，其实是给子级盒子限定了宽度，而换行标签是根据盒子宽度超过页面宽度才会换行，解决方法就是给盒子设置最小宽度min-width,这样盒子宽度会被文字撑开，从而换行

Answer 2

可以看一下white-space、overflow-wrap、word-wrap属性

Answer 3

可以试试flex

Answer 4

vue 框架，sass，less这些都会，为啥不会换行，百度会有很多答案的。