为什么这个CSS不能保持宽度？

请注意，我使用angular.winjs 4.4.0和winjs 4.4.3来制作此演示。但是，这实际上是关于如何在正确声明的情况下获得正确的CSS强制宽度。为什么这个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>

来源

2017-05-09 Da Best

如果您有像stvqqtertgwvcrqrgqwerywtwetbueyjehtrghcqewfqewx一样的不间断单词（没有空格），那么默认情况下CSS不会打破单词，并且如果容器的宽度小于上面的单词 –

的宽度是正确的，那么会溢出其容器，但是除非文本在ap标签内，否则即使它具有空格也不会破坏它 – Tik

如果你想打破长字符串那里没有空格，那么你必须定义'word-wrap：break-word';'如果没有内联元素（div，默认情况下不是内联元素），则该元素的CSS属性（以及宽度）

来源

2017-05-09 14:14:57

为什么这个CSS不能保持宽度？

回答

相关问题