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

Question

我现在正在一个网站上工作，但我的文本遇到了问题。当我缩小时，文本开始堆叠，实际上超出了我的 div。我的 div 具有固定的宽度和高度，并将其包裹在其他 div 中，我这辈子都想不通。虽然只有文字移动，其他一切都保持不变。看起来有点像这个

期望:

this is my text
in the way that
I want it to be

实际:

this
is
the
text

当我缩小时，文本往往会堆叠起来并推出 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;