なぜこのCSSは幅を維持しませんか？

Question

このデモを行うには、angular.winjs 4.4.0とwinjs 4.4.3を使用しています。しかし、これは本当に私がそれを宣言するように幅を強制する正しいCSSを得ることについてです。

私が期待しているのは、宣言したときの幅とdiv内にテキストを折り返すテキストです。代わりに、幅が宣言されていないかのように、テキストがまっすぐ進むようになっています。

このCSSが正しいかどうかは疑問です。 （角のタグ付き）

HTML

<div class="fullScreen"> 
    <div id="appHeader"> 
     <div> 
      <win-back-button></win-back-button> 
      <h2 class="win-h2">App Header</h2> 
     </div> 
     <div> 
      <win-hub> 
       <win-hub-section header="'Images'" is-header-static="'true'"> 
        <div class="section1"> 
         stvqqtertgwvcrqrgqwerywtwetbueyjehtrghcqewfqewx how 
         stvqqtertgwvcrqrgqwerywtwetbueyjehtrghcqewfqewx 
        </div> 
       </win-hub-section> 
       <win-hub-section header="'ListView'" is-header-static="'true'"> 
        <div class="section2"> 
         srtvwtrevwthvw cretgqcxtqryqreywtyuwtrjuvbeyjyetbjetyjeythvwrgwrcfg why 
         srtvwtrevwthvw cretgqcxtqryqreywtyuwtrjuvbeyjyetbjetyjeythvwrgwrcfg 
        </div> 
       </win-hub-section> 
       <win-hub-section header="'Video'" is-header-static="'true'"> 
        <div ng-class="section3"> 
         wetryvwrfgvwthertyjeybjbetrhwvrgqregcqgrwehrtejetyjkrbukrutyjbetrhvwergqcerfqrgwehtrjrytnkukrjbevthvwrqce maybe 
         wetryvwrfgvwthertyjeybjbetrhwvrgqregcqgrwehrtejetyjkrbukrutyjbetrhvwergqcerfqrgwehtrjrytnkukrjbevthvwrqce 
        </div> 
       </win-hub-section> 
       <win-hub-section header="'Form Controls'" is-header-static="'true'"> 
        <div ng-class="section4"> 
         srgtcvwerfgvwhertyjytrkn4tjbethvwgwqrefqewtewrcgrtehtverhjtyjbyjyhvw3rtg2q3ref134t26ytyveh654ub457j3thv2rg1cr14tf1q243tcx 3erx 23r34 hello 
         srgtcvwerfgvwhertyjytrkn4tjbethvwgwqrefqewtewrcgrtehtverhjtyjbyjyhvw3rtg2q3ref134t26ytyveh654ub457j3thv2rg1cr14tf1q243tcx 3erx 23r34 
        </div> 
       </win-hub-section> 
      </win-hub> 
     </div> 
    </div> 
</div> 

CSS（ブラウザがそれを生産する生として部分的、）

.fullScreen { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

/*width of each section*/ 
.win-hub-section .section1 { 
    width: 150px; 
    overflow: hidden; 
} 

.win-hub-section .section2 { 
    width: 194px; 
} 

.win-hub-section .section3 { 
    width: 100px; 
} 

.win-hub-section .section4 { 
    width: 130px; 
} 

HTML

<div class="ng-isolate-scope win-hub win-disposable win-hub-horizontal win-element-resize"> 
    <div class="win-hub-viewport" role="group" style="opacity: 1; -ms-scroll-snap-points-x: snapList(0px, 710px, 1635px, 3072px);" aria-label="Scrolling Container"> 
     <div class="win-hub-surface"> 
      <div class="win-hub-section win-disposable" ng-transclude="true"> 
       <div class="win-hub-section-header"> 
        <button class="win-hub-section-header-tabstop" role="heading" type="button"> 
         <div tabindex="-1" class="win-hub-section-header-wrapper"> 
          <h2 class="win-type-subheader win-hub-section-header-content">Images</h2> 
          <span class="win-hub-section-header-chevron win-type-body">See more</span> 
         </div> 
        </button> 
       </div> 
       <div class="win-hub-section-content"> 
        <div class="section1 ng-scope"> 
         stvqqtertgwvcrqrgqwerywtwetbueyjehtrghcqewfqewx how 
         stvqqtertgwvcrqrgqwerywtwetbueyjehtrghcqewfqewx 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

あなたが長い文字列を分割したい場合スペースがない場合は、 'word-wrap：break-word;'を定義する必要があります。その要素のCSSプロパティ（幅とともに）はインライン要素ではない（divはデフォルトではありません）