html - 文字浮出侧边栏

Question

文本超出了我的 div 并且没有固定的宽度，所以我不知道为什么要这样做。侧边栏的长度不应超过 200 像素。

HTML

     <div id="sidebar">
        <div class="side_box">
            <div class="side_box_title"><span>VAULT FEED</span></div>
            <div class="side_box_content">
                dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
            </div>
        </div>
    </div>

CSS

#sidebar {
    max-width: 200px;
    margin-top: 1%;
    margin-left: 1%;
    float: left;
}
.side_box {

}

.side_box_title {
    height: 25px;
    padding-top: 2px;
    text-align: center;
    color: white;
}

.side_box_content {
    border: solid 1px;
    padding-left: 5px;
    padding-right: 5px;
}

Answer 1

我会选择 css3 word - break property。 -> Word break css

只需将以下内容添加到 .side_box_content 类:

.side_box_content {
    border: solid 1px;
    padding-left: 5px;
    padding-right: 5px;


    word-break: break-all;
}

试试看:-> Test drive

干杯!