Question

我希望div宽度中的文本“See All used-miscellaneous-lasers”，但文本只在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认为二手激光是一个字，所以它不想把它包装到另一条线上。您可以通过在-'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

Answer 2

试试这个，我添加了溢出：可见;

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;
     overflow:visible;
     width: 106px; }

在<a> tag works in IE and Chrome but not in Firefox</a>内设置文字宽度

2 个答案: