Question

我正在网站上工作，我的文字遇到了问题。当我缩小时，文本开始堆叠，实际上从我的div中消失。我有一个固定宽度和高度的div，并将它包裹在其他div中，并且无法在我的生活中找到它。只有文本移动，其他一切都保持不变。看起来有点喜欢这个

所需：

这是我的文字
在方式中我希望它是

实际：

此
  是
  该
  文本

当我缩小文本时，文本会叠加并推出div。

   .content {
    width: 960px;
    margin: 0 auto;
    }

    .contentleft{
    float: left;
    width: 480px;
   }

    .contentright{
    float: right;
    width: 480px;
    }

    .boxone {
    float: left;
    clear:both;
    height: 211px;
    width: 230px;
    background-image:url(../images/rec1.png);
    }

    .textone {
    width: 220px;
    height: 200px;
    overflow:hidden;
    clear: both;

   }

HTML

     <div class=content>
            <div class=contentleft>
                <div class=boxone>

                    <div class=textone>
                 <p> TEXT TEXT TEXT TEXT </p> 

                    </div>
                    <div class=learnone>
                    </div>
                </div>

                <div class=boxtwo>
                </div>
            </div>

            <div class=contentright>
                <div class=boxthree>
                </div>
                <div class=boxfour>
                </div>
            </div>
        </div>

我该怎么做才能阻止该文字移动？

Answer 1

缩放页面中的所有项目是一种浏览器行为，但作为开发人员，您可以指定字体大小（以像素为单位）。

font-size:12px;

Answer 2

尝试简单地增加div的宽度。

实施例

.contentleft {
    width: 800px;
}

浏览器调整大小时文本移动

2 个答案: