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

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;
}