设置文本宽度<a>标签在IE和Chrome中可用，但不能在Firefox中使用

我希望在div宽度中显示文本“查看所有used-miscellaneous-lasers”，但文本仅在Firefox中出现在div外。这个问题的原因是什么？如何解决？这里是我的代码：设置文本宽度<a>标签在IE和Chrome中可用，但不能在Firefox中使用

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>

来源

2012-07-11 Chani Poz

的原因是火狐认为，二手杂激光器是一个字，因此不希望将其换到另一条线。您可以通过在-'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

来源

2012-07-11 13:42:06

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

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; }

来源

2012-07-11 12:58:18 Tschallacka

不，一点用也没有，它只是增加了一个滚动条。 – 2012-07-11 13:06:01

我的歉意，它应该已经溢出：可见;这会强制元素在包含框外呈现。 – Tschallacka 2012-07-11 13:28:12

他为什么希望文字出现在div之外？ – 2012-07-11 13:42:19

设置文本宽度<a>标签在IE和Chrome中可用，但不能在Firefox中使用

回答

相关问题