当窗口大小减小时,框内的文本超出

时间:2014-02-14 10:36:55

标签: 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;
    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;
}

当屏幕为全宽时,它工作正常。但是如果我们将屏幕缩小到更小的尺寸,则div中的文本超出!请参考我附上的图片。请帮助我。

网址:Rajsree

widescreen

smaller screen

1 个答案:

答案 0 :(得分:0)

删除div元素并将类设置为body标记

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

将类分配给body选项卡,

<body class="fullscreen-img">

然后通过修改背景属性来更新类的css。

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

从背景中删除中心属性。


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