Question

也许这很简单，但让我疯了。要理解这个问题，最简单的方法就是查看图像。

alt text

Div宽度截断单词或圆角边框（如果单词之间有空格或短划线）。如果宽度不足以包含元素，我如何强制每个“a”元素进入一个新行？

这是代码

<div id="post-tags">
    <span class="tag-title">Tagged:</span>
                            <a href="#">tag2</a>
                            <a href="#">tag3</a>
                            <a href="#">tag4</a>
                            <a href="#">longtag5</a>
                            <a href="#"li>longtag6</a>
                            <a href="#">longtag7</a>
                            <a href="#">longtag8</a>
                            <a href="#">longtag9</a>
                            <a href="#">longtag10</a>
                            <a href="#">longtag11</a>
                            <a href="#">longtag12</a>
                </div>

和CSS

   #post-tags{
     width: 560px;
     float: left;
     padding: 15px;
     font-size: 11px;
     } 

  #post-tags .tag-title{
     color: #6b6b6b;
     padding:  5px 0 0 5px;
    }

 #post-tags a{
     line-height: 24px;
     padding: 3px;
     background: #a7d1e3;
     padding: 4px 10px 4px 10px;
     margin: 0 0 10px 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    }

 #post-tags a:hover{
     color: #a7d1e3;
     background: #205F82;

    }

Answer 1

我发现它在chrome中不起作用。解决方案可能是浮动元素。因此，您为选择器float:left;和#post-tags .tag-title添加#post-tags a。当然，现在您将看到需要修改和填充和边距。接近你的解决方案是margin: 0 2px 10px;和padding: 0 10px; #post-tags a，因此您的新css将如下所示：

#post-tags {
    width: 560px;
    padding: 15px;
    font-size: 11px;
    overflow:hidden;
}
#post-tags .tag-title {
    color: #6b6b6b;
    padding:  5px 0 0 5px;
    float:left;
}
#post-tags a {
    line-height: 24px;
    padding: 3px;
    background: #a7d1e3;
    margin: 0 2px 10px;
    padding: 0 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    float:left
}
#post-tags a:hover {
    color: #a7d1e3;
    background: #205F82;
}

这是一个实例：http://jsbin.com/adika4

Div在包装上截断单词和边框

1 个答案: