html - 在 标签内设置文本宽度在 IE 和 Chrome 中有效，但在 Firefox 中无效

Question

我想要 div 宽度中的文本“查看所有使用的杂项激光”，但文本仅在 Firefox 中出现在 div 之外。这个问题的原因是什么，如何解决？这是我的代码:

CSS

div.banner a {
     color: #FFFFFF;
     display: inline-block;
     margin-left: -13px;
     text-decoration: none;
     width: 100%; 
}

 div.banner {
     background: url("banner.jpg") no-repeat scroll center top transparent;
     font-size: 15px;
     font-weight: normal;
     height: 38px;
     margin-top: 20px;
     padding: 18px 24px 50px 69px;
     text-align: left;
     text-transform: uppercase;
     width: 106px; 
}

HTML

<div class="banner">    
    <a target="_blank" href="http://10.0.0.145/used/b">See All used-miscellaneous-lasers</a>
</div>

Answer 1

原因是 Firefox 认为 used-miscellaneous-lasers 是一个词，所以它不想将它换到另一行。您可以通过在 -'s 之后添加空格或 nbsp; 轻松解决此问题。

<div class="banner">    
    <a target="_blank" href="http://10.0.0.145/used/b">See All used- miscellaneous- lasers</a>
</div>

否则到 div css，你可以添加 word-wrap: break-word;;然而，这个词并不总是以可读的形式被打破。

div.banner {
    background: url("banner.jpg") no-repeat scroll center top transparent;
    font-size: 15px;
    font-weight: normal;
    height: 38px;
    margin-top: 20px;
    padding: 18px 24px 50px 69px;
    text-align: left;
    text-transform: uppercase;
    width: 106px;
    word-wrap: break-word; 
}

Live DEMO