li不自动换行

Question

*{padding: 0;margin: 0;}
.one{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

.one ul {
    height: auto;
}
.one ul li{
    list-style: none;
    display: block;
}



<div class="one">
        <ul>
            <li>服务名称:XXX</li>
            <li>服务价格:XXX</li>
            <li>服务时长:XXX</li>
            <li>服务简介:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
            <li>摘要:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        </ul>
     </div>

怎么让后两个li自动换行??

Answer 1

<style>
*{padding: 0;margin: 0;}
.one{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

.one ul {
    height: auto;
}
.one ul li{
    list-style: none;
    display: block;
    word-wrap: break-word;
    word-break: normal; 
}
</style>




<div class="one">
    <ul>
        <li>服务名称:XXX</li>
        <li>服务价格:XXX</li>
        <li>服务时长:XXX</li>
        <li>服务简介:撒大家阿克苏大家卡拉三季度卡拉三季度了卡萨帝景拉撒大家啊是了的据拉升阶段拉萨的</li>
        <li>摘要:撒大家阿克苏大家卡拉三季度卡拉三季度了卡萨帝景拉撒大家啊是了的据拉升阶段拉萨的</li>
    </ul>
</div>

Answer 2

li:nth-last-child(1),li:nth-last-child(2){
  height:auto;
  word-wrap:break-word;
  width:200px;//这个宽度根据自己实际情况定
}

自动换行样式可以参考：http://www.cnblogs.com/mofish/archive/2011/02/16/1956263.html
关于css3 nth-last-child选择器可以参考：http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%...