css 在 Package 器div内居中文本输出div

brvekthn 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(133)

我有一个名为note的div，里面有textWrapper和noteText。我需要文本下降一行时达到限制（宽度），但由于某种原因，它只是削减句子，没有下降行和没有滚动的意图。附加代码：
有什么想法吗？

.note {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 250px;
    height: 300px;
    background-image: url("media/notebg.png");
    background-size: cover;
    animation: fadeIn 1s;
    
}

/*Styles for text in the note*/
.note > .noteText {
    position: absolute;
    top: 40px;
    left: 10px;
    width: 200px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.note > .textWrap {
    position: absolute;
    top: 50px;
    left: 10px;
    width: 200px;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
}

css

来源：https://stackoverflow.com/questions/75118139/centering-a-text-output-div-inside-a-wrapper-div

1条答案

按热度按时间

wljmcqd81#

您可以使用overflow-wrap自动断开文本。

.note {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 250px;
    height: 300px;
    background-image: url("media/notebg.png");
    background-color: burlywood;
    background-size: cover;
    animation: fadeIn 1s;
}

/*Styles for text in the note*/
.note>.noteText {
    position: absolute;
    top: 40px;
    left: 10px;
    width: 200px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.note>.textWrap {
    position: absolute;
    top: 50px;
    left: 10px;
    width: 200px;
    max-height: 250px;
    overflow-x: hidden;
    overflow-wrap: break-word;
    overflow-y: auto;
    text-align: center;
}

<body>
    <div class="note">
        <div class="textWrap">
            <div class="noteText">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta inventore vero ex quibusdam porro necessitatibus accusantium architecto? Delectus, officiis. Magni natus pariatur aliquam delectus excepturi quod ipsa! Natus, ipsa tempore.
            </div>
        </div>
    </div>
</body>

赞(0）回复(0）举报 2023-01-18

我来回答

css 在 Package 器div内居中文本输出div

1条答案

相关问题

热门标签

最新问答