CSS White-Space e Display

Estive precisando um dia destes de algo para realizar a quebra de linha e não podia optar por JavaScript ou suas vastas opções. Então que descubro o White-Space e Display.

Tag White-Space

É usada para o tratamento de espaços em branco, que possuí as seguintes propriedades:
Valor         Descrição
normal      Os espaços em branco serão ignorados pelo browser.
nowrap     O texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br>
pre              Os espaços em branco serão preservados pelo browser.
pre-line     Os espaços em branco serão ignorados pelo browser e o texto será quebrado quando necessário.
pre-wrap  Os espaços em branco serão preservados pelo browser e o texto será quebrado quando necessário.
inherit       Será herdado as características do elemento pai.
Tag Display

Além de utilizar a tag div como uma quebra de linha quase natural, em muitos casos como na utilização de tags do jsf que geram divs e com isso muitas são renderizadas é que temos a tag Display.

Value                                    Description
none                                      O elemento não será exibido em todos
box (ou flex-box)            O elemento é apresentado como um em nível de bloco flex container box
block                                     O elemento é apresentado como um em nível de bloco do elemento(like paragraphs and headers)
flex                                         O elemento é apresentado como um em nível de bloco flex container box
inline Default.                    O elemento é apresentado como um elemento inline-level(like span)
inline-block                        O elemento é colocado como um elemento inline(on the same line as adjacent content), but it behaves as a block element
inline-flex                             O elemento é apresentado como um n inline-level flex container box
inline-table                           O elemento é apresentado como um n inline-level table
list-item                                 O elemento é apresentado como um list-item
table                                        O elemento é apresentado como um tabela
table-caption                       O elemento é apresentado como um tabela caption
table-cell                               O elemento é apresentado como um tabela cell
table-column                       O elemento é apresentado como um tabela column
table-column-group         O elemento é apresentado como um tabela column group (like <colgroup>)
table-footer-group            O elemento é apresentado como um tabela footer row group
table-header-group          O elemento é apresentado como um tabela header row group
table-row                              O elemento é apresentado como um tabela row
table-row-group                O elemento é apresentado como um tabela row group
inherit                                   Será herdado as características do elemento pai

Fonte(s):
http://www.w3schools.com
http://www.maujor.com

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s