个人中心
gpt4 book ai didi

html - 段落超出页面最大宽度

转载 作者：太空宇宙 更新时间：2023-11-04 00:02:53 25 4
gpt4 key购买 nike

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

最佳答案

使用 word-wrap: break-word; 这样每次容器中出现一个单词“want to get out”时，css 规则都会换行。

* 这是一个 CSS3 属性。

您可以在 W3C 找到更多相关信息，这里有一个链接。 word-wrap specs

关于html - 段落超出页面最大宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15882315/

25 4 0
文章推荐： jquery - 如何确保类始终应用于 jQuery 的元素？
文章推荐： c - android中的fwrite有时很慢
文章推荐： c - 为什么 GCC 分配它不使用的堆栈空间？
文章推荐： python - cross_val_score 返回每个类的准确度
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com