手机端：文在占据一行，多了就会被挤下去，用了强制不换行，文字就会飘在别的地方，怎么回事呢？（刚入门，不太懂）

Question

    css:
    .top_ul {
    width: 100%;
  }
    .top_ul li {
    list-style-type: none;
    width: 49%;
    float: left;
    margin-left: 0.5%;
    height: auto;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
}
.bedimg {
    width: 92%;
    height: 92%;
    display: block;
    margin: 0px auto 5px auto;
    float: left;
    margin-left: 5%;
}
.whiterbed {
    width: 100%;
    text-align: center;
    word-wrap: break-word;
    margin: 8px auto 5px auto;
    color: #000;
}
.tilte_four {
    width: 100%;
    color: #000;
    font-size: 12px;
}
.mianliao {
    font-size: 12px;
    white-space: nowrap;
}
.bedprice {
    text-align: center;
    color: #c5a265;
    padding-top: 5%;
    font-size: 16px;
}



    
     <ul class="top_ul">
                                <li>
                                    <a href="{$url}64" target="_parent">
                                        <img class="bedimg" src="images/jingpin_tuijian/left1.jpg">
                                        <div class="whiterbed">
                                            <p class="tilte_four">挂横幅第三个喝口水改口费被</p>
                                            <p class="mianliao">非官方的广泛地720</p>
                                            <p class="bedprice">￥220.0</p>
                                        </div>
                                    </a>
                                </li>
                                </ul>

Answer 1

文字多了 放不下了自然要挤下去 强制不换行 只会让多余的部分跑偏 你要是想在一行显示 可以改变文字大小，或者改变文字范围大小 又或者给文字的容器增加溢出添加滚动条 overflow：auto；