Skip to main content
Commonmark migration
Fonte Link

Isto é um comportamento normal, a largura ocupada por todos os <a> é maior que a da sua div #icons. Mesmo que você use a propriedade white-space:nowrap (em #icons) o conteúdo interno ultrapassará o limite:

img

Nesse caso você tem duas opções: Diminuir o tamanho ocupado pelos elementos filhos ou aumentar a largura do elemento pai.

Alternativa

Quando não se tem uma quantidade fixa de elementos internos, a melhor solução pode ser utilizar a propriedade flexbox.


###Exemplo:###

Exemplo:

* {-webkit-box-sizing:border-box;box-sizing: border-box;}

/* Só isso...
   Não precisei definir nada nos elementos filhos */
.documents {
    display: -webkit-flex;
     display: -ms-flexbox;  
        display: -moz-box;
            display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<p>Com um único elemento</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais de um...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais ainda...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

Isto é um comportamento normal, a largura ocupada por todos os <a> é maior que a da sua div #icons. Mesmo que você use a propriedade white-space:nowrap (em #icons) o conteúdo interno ultrapassará o limite:

img

Nesse caso você tem duas opções: Diminuir o tamanho ocupado pelos elementos filhos ou aumentar a largura do elemento pai.

Alternativa

Quando não se tem uma quantidade fixa de elementos internos, a melhor solução pode ser utilizar a propriedade flexbox.


###Exemplo:###

* {-webkit-box-sizing:border-box;box-sizing: border-box;}

/* Só isso...
   Não precisei definir nada nos elementos filhos */
.documents {
    display: -webkit-flex;
     display: -ms-flexbox;  
        display: -moz-box;
            display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<p>Com um único elemento</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais de um...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais ainda...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

Isto é um comportamento normal, a largura ocupada por todos os <a> é maior que a da sua div #icons. Mesmo que você use a propriedade white-space:nowrap (em #icons) o conteúdo interno ultrapassará o limite:

img

Nesse caso você tem duas opções: Diminuir o tamanho ocupado pelos elementos filhos ou aumentar a largura do elemento pai.

Alternativa

Quando não se tem uma quantidade fixa de elementos internos, a melhor solução pode ser utilizar a propriedade flexbox.


Exemplo:

* {-webkit-box-sizing:border-box;box-sizing: border-box;}

/* Só isso...
   Não precisei definir nada nos elementos filhos */
.documents {
    display: -webkit-flex;
     display: -ms-flexbox;  
        display: -moz-box;
            display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<p>Com um único elemento</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais de um...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais ainda...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

adicionou 25 caracteres ao conteúdo
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

###Exemplo:###
* {-webkit-box-sizing:border-box;box-sizing: border-box;}

/* Só isso...
   Não precisei definir nada nos elementos filhos */
.documents {
    display: -webkit-flex;
     display: -ms-flexbox;  
        display: -moz-box;
            display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<p>Com um único elemento</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais de um...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais ainda...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>
* {-webkit-box-sizing:border-box;box-sizing: border-box;}

/* Só isso...
   Não precisei definir nada nos elementos filhos */
.documents {
    display: -webkit-flex;
     display: -ms-flexbox;  
        display: -moz-box;
            display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<p>Com um único elemento</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais de um...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais ainda...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>
* {-webkit-box-sizing:border-box;box-sizing: border-box;}

/* Só isso...
   Não precisei definir nada nos elementos filhos */
.documents {
    display: -webkit-flex;
     display: -ms-flexbox;  
        display: -moz-box;
            display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<p>Com um único elemento</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais de um...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais ainda...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

###Exemplo:###
* {-webkit-box-sizing:border-box;box-sizing: border-box;}

/* Só isso...
   Não precisei definir nada nos elementos filhos */
.documents {
    display: -webkit-flex;
     display: -ms-flexbox;  
        display: -moz-box;
            display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<p>Com um único elemento</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais de um...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais ainda...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

Isto é um comportamento normal, a largura ocupada por todos os <a> é maior que a da sua div #icons. Mesmo que você use a propriedade white-space:nowrap (em #icons) o conteúdo interno ultrapassará o limite:

img

Nesse caso você tem duas opções: Diminuir o tamanho ocupado pelos elementos filhos ou aumentar a largura do elemento pai.

Alternativa

Quando não se tem uma quantidade fixa de elementos internos, a melhor solução pode ser utilizar a propriedade flexbox.

* {-webkit-box-sizing:border-box;box-sizing: border-box;}

/* Só isso...
   Não precisei definir nada nos elementos filhos */
.documents {
    display: -webkit-flex;
     display: -ms-flexbox;  
        display: -moz-box;
            display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<p>Com um único elemento</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais de um...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais ainda...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>