Question

http://imageshack.us/photo/my-images/690/printef.jpg/ 文本从正文页面出来，我不知道为什么会发生这种情况。文本应从蓝线的另一行开始。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script type="text/javascript" href=""></script>
    <title> tech </title>
</head>

<body id="skin" style="background-image:url(img/bck.jpg)">
    <div id="root">
        <div id="Meniu_header">
            <div id="top">
                <header id="top_header" style="background-image: url(top.jpg)">
                    <img src="img/200.jpg">
                    <h1 id="h1"> UNDER CONSTRUCTION </h1>
                </header>

                <nav id="meniu">
                        <ul>
                            <li> Acasa </li>
                            <li> Servicii </li>
                            <li> Contact </li>
                        </ul>
                </nav>
            </div>
        </div>

            <div id="test">
                <h2> sajbvljaslblas </h2>
                <p> afjkvbafjlbljabadflblajjlaerbladfblaerjlblae </p>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br />
            </div>

            <div id="pagina">           
                <div id="stanga">
                    <div id="optiuni">
                        <ul id="st_optiuni">
                            <li> Aluminiu </li>
                            <li> Plastic </li>
                            <li> Fonta </li>
                            <li> Otel </li>
                        </ul>
                        <div id="st_scris">
                            <p> adbnaeasfbabfa </p>
                            <p> adfbadf fsdbhadad </p>
                            <p> adfbad af afsd </p>
                            <p> a dfbad  </p>
                            <p>  adfba fa fd</p>
                            <p> adfb adf  adfb </p>
                            <p> adfb adfb ad </p>
                        </div>
                    </div>
                </div>


            <div id="dreapta">
            <section id="dr_articole">
                <article>
                    <header>
                        <h2> Titlu </h2>
                        <p class="problema"> This is a long text that it's makeing me problems ..........aaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa </p>
                    </header>
                </article>
            </section>
            </div>
            </div>

        <footer>
            <p id="footer"> Copyright © 2013    </p>
            <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/ro/"><img alt="Licenţa Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/ro/80x15.png" /></a>.
        </footer>

    </div>

</body>

</html>

和css是：

*{
    margin: 0px;
    padding: 0px;
}
header, nav, section, article, footer{
    display: block;
}
body{
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: center;
}
footer{
    display: -webkit-box;
    -webkit-box-pack: center;
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
}
#skin{
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#root{
    max-width: 1000px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
    border: 2px solid white;
}
#top{
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
#top_header{
    display: -webkit-box;
    -webkit-box-orient: horizoantal;
    padding: 20px;
}
#h1{
    border: 1px solid red;
    font: 50px bold Arial;
    color: #FFFFFF;
    margin-left: 50px;
}
#meniu{
    color: white;
    display: -webkit-box;
    -webkit-box-orient: horizoantal;
    background: green;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#meniu li{
    display: inline-block;
    text-decoration: none;
    list-style: none;
    padding: 5px;
    font: bold 17px Tahoma;
}
#test{
    border: 2px solid red;
    width: 800px;
    height: 400px;
    margin-top: 20px;
    margin-left: 100px;
}
#pagina{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    margin-top: 50px;
    border: 4px solid blue;
}
#stanga{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    border: 3px dashed red;
}
#st_optiuni{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 200px;
    list-style: none;
    padding: 5px 5px 5px 10px;
    margin-top: 50px;
    border-radius: 8px;
    color: #FFFFFF;
    border: 2px solid yellow;
}
#st_scris{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 200px;
    list-style: none;
    padding: 5px 5px 5px 10px;
    margin-top: 50px;
    border-radius: 8px;
    color: #FFFFFF;
    border: 2px solid yellow;
}
#dreapta{
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
#dr_articol{
    -webkit-box-flex: 1;
    border: 1px dashed yellow;
}
.problema{
    color: white;
}

Answer 1

这样使用word-wrap: break-word;每当一个单词“想要离开”容器时，css规则就会在新行上打破世界。

*这是一个CSS3属性。

有关这方面的更多信息，您可以在W3C找到这里的链接。 word-wrap specs

Answer 2

一个健康的开始是强制您的父容器是浏览器宽度的相对和范围。然后一天工作到您看似超出范围的特定子元素。 Google Chrome的开发人员工具是调试此类问题的绝佳资源。

Answer 3

这是我的第一次尝试，请原谅我的任何错误。

您必须指定容器'div'的宽度，以便内部元素不会超出父级的宽度。

以下是对您网页的快速修复：

#dreapta{
    width: 520px;
    padding: 0 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

段落超出了页面的最大宽度

3 个答案: