왜이 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

당신이 긴 문자열을 중단하고자하는 경우 공백이없는 경우 '단어 감싸기 : 중단 단어'를 정의해야합니다. 해당 요소에 대한 CSS 속성 (폭과 함께), 인라인 요소가 아닌 경우 (div는 기본적으로 div가 아닙니다.)

출처

2017-05-09 14:14:57

왜이 CSS가 너비를 유지하지 않습니까?

답변

관련 문제