当前位置: 代码迷 >> HTML/CSS >> 为何加了word-break : break-all;还是不换行呢
  详细解决方案

为何加了word-break : break-all;还是不换行呢

热度:764   发布时间:2012-09-24 13:49:41.0
为什么加了word-break : break-all;还是不换行呢?
<div class="tagwraper">
<a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a>
<a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a>
<a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a>
</div>

<style>
.tagwraper{width:940px;/*990-48*/border:1px solid #E6E6E6;padding:24px; background:#fff; margin:0 auto;word-break : break-all; }
.tagwraper a{float:left;margin-right:26px;color:#3178C6;}
.tagwraper a:hover{background:#217BD1;color:#fff;}
</style>

------解决方案--------------------
JScript code

<div class="tagwraper">
<a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a>
<a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a>
<a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a><a href="#">商人学院</a>
</div>

<style>
.tagwraper{width:940px;/*990-48*/border:1px solid #E6E6E6;padding:24px; background:#fff; margin:0 auto;word-break : break-all; }
.tagwraper:after{
    content:".";
    display:block;
    clear:both;
    height:0;
    visiblity:hidden;
}
.tagwraper{
    zoom:1;  /* for IE */
}
.tagwraper a{float:left;margin-right:26px;color:#3178C6;}
.tagwraper a:hover{background:#217BD1;color:#fff;}
</style>

------解决方案--------------------
inline-block 行内块元素

参考下
http://www.blueidea.com/tech/web/2007/4532.asp
  相关解决方案