Html 当窗口大小减小时，框中的文本将超过_Html_Css_Overflow

Html 当窗口大小减小时，框中的文本将超过

html css

Html 当窗口大小减小时，框中的文本将超过,html,css,overflow,Html,Css,Overflow,我有一个网站，其中一个div有一些文本和背景色 <div class="info-box synopsis"> Some text </div> .synopsis { background:#0d101c; text-indent:40px; opacity:0.6; margin-top:20px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

我有一个网站，其中一个div有一些文本和背景色

<div class="info-box synopsis">
 Some text
</div>

.synopsis {
    background:#0d101c;
    text-indent:40px;
    opacity:0.6;
    margin-top:20px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    line-height:25px;
    font-size:1.30;
    text-align:justify;
    border:1px solid #0d101c;
}
.info-box {
    padding:10px;
    color:#d2d2d2;
    font-size:1em;
}


一些文本
.概要{
背景：#0d101c；
文本缩进：40px；
不透明度：0.6；
边缘顶部：20px；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
字体系列：“Roboto Condensed”，无衬线；
线高：25px；
字号：1.30；
文本对齐：对齐；
边框：1px实心#0d101c；
}
.信息框{
填充：10px；
颜色：#d2d2d2；
字号：1em；
}

当屏幕全宽时，它工作正常。但是如果我们将屏幕缩小，div中的文本将超过！请参考我所附的图片。请在这方面帮助我

网址：

删除div元素并将class-to-body标记关联

<div class="fullscreen-img"></div>

从背景中删除“中心”属性

如果您在将图像放置到正确位置时遇到困难，请将图像大小编辑为适当的像素。

请给出溢出：当屏幕在媒体查询中变小时滚动……您需要开始强制定位和调整每种元素的大小，或者使用绝对值，或者如果您不必支持较旧的浏览器，flexbox模型<代码>弹性方向：列准确地说。如果flexbox模型适合您，请告诉我，以便我给您一个完整的解决方案。@Mabedan哦，是的。它在firefox中工作！

<body class="fullscreen-img">

.fullscreen-img {
background: url("2.jpg") no-repeat scroll;