我有一个包含注册表单的 DIV，它会自动从页面顶部向下浮动大约 400 像素。 （我试图将它放在首屏。）这通常效果很好，但有时 DIV 会笨拙地拆分一行文本，如下图所示。如何防止文本行在行中间被破坏？

文本拆分示例

HTML

<div id="container"><form id="myform"></div>Lorem ipsum dolor sit amet...

CSS

#container {
    -moz-transform: translate( 0,100px) scale(.8);
    -webkit-transform: translate( 0,100px) scale(.8);
    -ms-transform: translate(0,100px) scale(.8);
    transform:translate( 0,100px) scale(.8);
}
#container form {
    float:left;
    clear:both;
    
#container:before{
    content:"";
    display:block;
    height:400px;
    float:left;
}

编辑：我试过用另一个 div 包装容器 div 并制作 width: 100% !important 但这似乎也不起作用。