弹性盒屏幕的 IE11 问题不适合 Angular 8

Question

我在 IE11 中遇到 CSS 问题，所有其他浏览器都能正常工作。 问题是由于字符串长度屏幕不适合浏览器。

我尝试将 display:flex,flex: 1 1 auto, flex-wrap:wrap, white-space:pre-wrap 设置为 span 具有长字符串的父 div。

请帮我解决这个问题。 我还复制了 IE11 生成的 HTML。

注意：截图为裁剪版。

HTML 标记：

<div class="row pad1-0" _ngcontent-ean-c19="">
   <aside class="col-md-3 ng-star-inserted" id="sidebar" style="top: 0px;" _ngcontent-ean-c19="">
    <div class="toggle-side" _ngcontent-ean-c19="">
      <i class="fa fa-bars" _ngcontent-ean-c19=""></i>
    </div>
    <ul class="participant-menu popmenu" _ngcontent-ean-c19="">
      <li class="menu-item ia-language saved" data-goto="ia-language" _ngcontent-ean-c19="">
        Languages</li>
          </ul>
    </aside>

    <main class="col-md-9 ng-star-inserted" id="main" _ngcontent-ean-c19="">

    <section class="overview-options pad2-0 tright" _ngcontent-ean-c19="">
      <div class="btn-group" role="group" _ngcontent-ean-c19="">
        <button class="btn btn-secondary" onclick="window.print();" _ngcontent-ean-c19="">
          <i class="fa fa-print" _ngcontent-ean-c19=""></i> Print</button>
        <!--bindings={
       "ng-reflect-ng-if": "true"
       }--><button disabled="" class="btn btn-success btn-submit ng-star-inserted" _ngcontent-ean- 
      c19="">
          <i class="fa fa-paper-plane" _ngcontent-ean-c19=""></i> Submit</button>
      </div>
    </section>


    <app-languages-overview ng-reflect-model-errors="[object Object]" ng-reflect-has-edit-access="true" 
    ng-reflect-section="[object Object]" ng-reflect-validation-manager="[object Object]" ng-reflect-has- 
    fcdp-role="false" _ngcontent-ean-c19="" _nghost-ean-c21=""><section class="overview ia fields 
    language current" id="ia-language" _ngcontent-ean-c21="">

    <app-overview-card-header ng-reflect-title="Languages" ng-reflect-is-edit-hidden="true" ng-reflect- 
    row-version="AAAAAABxc2A=" _ngcontent-ean-c21="" _nghost-ean-c35=""><div class="partTitle flex-row" 
    _ngcontent-ean-c35="">
    <span class="secTitle" _ngcontent-ean-c35="">Languages</span>
    <div class="flex-row history-dropdown ng-star-inserted" _ngcontent-ean-c35=""></div>
    <nav class="right" _ngcontent-ean-c35="">
      <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-history" _ngcontent-ean-c35=""> 
     </i></a>     
      <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-pencil-alt" _ngcontent-ean- 
    c35=""></i></a>
     <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-compress ng-star-inserted" 
    _ngcontent-ean-c35=""></i></a>
     </nav>
      </div>
      </app-overview-card-header>
     <div class="part language border-right ng-star-inserted" _ngcontent-ean-c21="">

     <div class="flex-row overviewContainer ng-star-inserted" _ngcontent-ean-c21="">
      <div class="overview-field flex-row col-md-6 overviewItem" _ngcontent-ean-c21="">
        <span title="What language do you use at home?" class="ovtitle" _ngcontent-ean-c21="">Home 
     Language</span>
        <span class="ovval" _ngcontent-ean-c21="">English&nbsp;</span>
      </div>
      <div class="overview-field flex-row col-md-2 overviewItem" _ngcontent-ean-c21="">
        <span title="Read" class="ovtitle" _ngcontent-ean-c21="">Read</span>
        <span class="ovval" _ngcontent-ean-c21="">Yes&nbsp;</span>
      </div>
      <div class="overview-field flex-row col-md-2 overviewItem" _ngcontent-ean-c21="">
        <span title="Write" class="ovtitle" _ngcontent-ean-c21="">Write</span>
        <span class="ovval" _ngcontent-ean-c21="">Yes&nbsp;</span>
      </div>
      <div class="overview-field flex-row col-md-2 overviewItem" _ngcontent-ean-c21="">
        <span title="Speak" class="ovtitle" _ngcontent-ean-c21="">Speak</span>
        <span class="ovval" _ngcontent-ean-c21="">Yes&nbsp;</span>
      </div>
    </div>

    <div class="ng-star-inserted" _ngcontent-ean-c21="">
     <div class="flex-row overviewContainer ng-star-inserted" _ngcontent-ean-c21="">
        <div class="overview-field flex-row col-md-6 caret overviewItem blank" _ngcontent-ean-c21="">
          <span title="List any other languages you know" class="ovtitle" _ngcontent-ean-c21="">Other 
       Language

          </span>
          <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
        </div>
        <div class="overview-field flex-row col-md-2 overviewItem blank" _ngcontent-ean-c21="">
          <span title="Read" class="ovtitle" _ngcontent-ean-c21="">Read</span>
          <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
        </div>
        <div class="overview-field flex-row col-md-2 overviewItem blank" _ngcontent-ean-c21="">
          <span title="Write" class="ovtitle" _ngcontent-ean-c21="">Write</span>
          <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
        </div>
        <div class="overview-field flex-row col-md-2 overviewItem blank" appHistoryData="" _ngcontent- 
      ean-c21="">
          <span title="Speak" class="ovtitle" _ngcontent-ean-c21="">Speak</span>
          <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
        </div>
      </div>
    </div>

    <div class="flex-row overviewContainer" _ngcontent-ean-c21=""></div>

    <div class="flex-row overviewContainer" _ngcontent-ean-c21="">
      <div class="overview-field flex-row col-md-12 overviewItem blank" _ngcontent-ean-c21="">
        <span title="Notes" class="ovtitle" _ngcontent-ean-c21="">Notes</span>
        <span class="ovval" _ngcontent-ean-c21="">&nbsp;</span>
      </div>
    </div>
    </div>
   </section>
   </app-languages-overview>

     <app-ncp-overview style="overflow: hidden; display: flex; align-items: stretch;" ng-reflect-model- 
     errors="[object Object]" ng-reflect-has-edit-access="true" ng-reflect-section="[object Object]" ng- 
    reflect-validation-manager="[object Object]" ng-reflect-has-fcdp-role="false" _ngcontent-ean-c19="" 
    _nghost-ean-c33=""><section class="overview ia fields ncp current ng-star-inserted" id="ia-ncp" 
     _ngcontent-ean-c33="">


     <app-overview-card-header ng-reflect-title="Non-Custodial Parents" ng-reflect-is-edit-hidden="true" 
     ng-reflect-row-version="AAAAAABxggI=" _ngcontent-ean-c33="" _nghost-ean-c35=""><div 
    class="partTitle flex-row" _ngcontent-ean-c35="">
    <span class="secTitle" _ngcontent-ean-c35="">Non-Custodial Parents</span>
    <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-pencil-alt" _ngcontent-ean-c35=""> 
    </i></a>
     <a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-compress ng-star-inserted" 
    _ngcontent-ean-c35=""></i><!--bindings={
    "ng-reflect-ng-if": "false"
    }--></a>
    </nav>
   </div>
   </app-overview-card-header>



   <div class="part ncp ng-star-inserted" style="flex:1 1 0px; overflow: hidden; display: flex; flex- 
     direction: row;" _ngcontent-ean-c33="">
     <div class="ng-star-inserted" _ngcontent-ean-c33="">
          <div class="caretaker ng-star-inserted" _ngcontent-ean-c33="">


              <div class="row" _ngcontent-ean-c33="">
                  <div class="overview-field col-md-4" style="display: flex; flex-direction: row;" 
        _ngcontent-ean-c33="">
                      <span title="Relationship to Child(ren)" class="ovtitle" _ngcontent-ean- 
        c33="">Relationship to Child(ren)</span>
                      <span class="ovval" _ngcontent-ean-c33="">Other Parent&nbsp;</span>
                  </div>
                  <div class="overview-field col-md-8" style="flex:1 1 0px; overflow: hidden; display: 
      flex; flex-direction: row; align-items: stretch;" _ngcontent-ean-c33="">
                      <span title="Relationship to Child(ren) - Details" class="ovtitle" _ngcontent-ean- 
      c33="">Details</span>
                      <span class="ovval" _ngcontent-ean-c33="">fdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdf&nbsp;</span>
                  </div>
              </div>             

          </div>
      </div><div class="row" _ngcontent-ean-c33=""></div>
      <div class="row" _ngcontent-ean-c33=""></div>
     </div>

    </section>
   </app-ncp-overview>

  </main>
   </div>

Answer 1

我能够解决这个问题，即 word-break: break-word;在 IE11 中导致问题， 我把它改成了 word-break: break-all;并且它开始工作了..花了 3 个小时来解决这个问题 :)