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

Question

请注意，我使用 angular.winjs 4.4.0 和 winjs 4.4.3 制作此演示。但这实际上是关于获得正确的 css 来强制我声明的宽度。

我期望的是我声明的宽度和将自身包裹在 div 中的文本。相反，我得到的文本直接穿过，就好像没有声明宽度一样。

所以我想知道这个 CSS 是否正确。

HTML（带有 angular 个标签）

<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，默认情况下不是）

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

Why won't this css maintain the width?

html

css

winjs