Ao fazer o layout DivCSS, você precisa controlar o texto. Hoje vou apresentá-lo sistematicamente. Existem quatro propriedades em CSS que controlam as quebras de linha.
1. espaço em branco
Você pode obter o efeito das tags PRE em HTML e o efeito noWrap das células.
gramática:
espaço em branco: pré-nowrap normal
Valor:
normal: valor padrão. Método de processamento padrão. O texto lida automaticamente com quebras de linha. Se o limite do contêiner for atingido, o conteúdo irá para a próxima linha
pré: novas linhas e outros caracteres de espaço em branco serão protegidos. Este valor requer IE6+ ou !DOCTYPE declarado como suporte ao modo compatível com os padrões. Se a declaração !DOCTYPE não especificar o modo compatível com os padrões, esse atributo poderá ser usado, mas não terá efeito. O resultado é equivalente ao normal. Veja pré-objeto
nowrap: Força todo o texto a ser exibido na mesma linha até que o final do texto ou um objeto br seja encontrado. Veja o atributo noWrap
ilustrar:
Define ou recupera como os caracteres de espaço dentro de um objeto são tratados.
Caracteres de espaço em branco, como novas linhas, espaços e TAB, são ignorados por padrão em documentos HTML. Quando esta propriedade é definida como normal ou nowrap, você pode usar a entidade nomeada non-wrap-space para adicionar espaços e o elemento br para adicionar quebras de linha. Esta propriedade tem o mesmo efeito no conteúdo que você manipula usando o Document Object Model (DOM) e no conteúdo exibido pelo IE.
Esta propriedade funciona em objetos de bloco.
Estilos relacionados:
estouro de texto
Combiná-lo com espaço em branco elimina a necessidade de escrever um programa para determinar o comprimento de uma string. Clique aqui para ver um exemplo.
gramática:
estouro de texto: reticências do clipe
Valor:
clipe: valor padrão. Não mostra marcadores de omissão (…), mas simplesmente recortes
reticências: exibe uma marca de reticências (…) quando o texto dentro do objeto transborda
ilustrar:
Define ou recupera se deve ser usada uma marca de reticências (...) para marcar o excesso de texto dentro do objeto.
Esta propriedade afeta apenas o estouro do texto ocidental normal na direção horizontal embutida. O estouro embutido ocorre quando o texto dentro de uma linha excede a largura disponível sem a oportunidade de quebrar.
Para forçar a ocorrência de overflow e aplicar o valor de reticências, o autor deve definir a propriedade de espaço em branco do objeto como nowrap.
Se não houver oportunidade para quebras de linha (por exemplo, a largura do contêiner do objeto for estreita e houver um texto longo sem quebras de linha razoáveis), é possível estourar sem aplicar nowrap.
Para que o valor da elipse seja aplicado, esta propriedade deve ser definida para um objeto que possua uma área invisível. A melhor opção é definir a propriedade overflow como oculta. Esta propriedade também é aplicada ao definir a propriedade overflow como scroll ou auto. Mas aparecerão barras de rolagem.
Ao selecionar a marca de omissão, o texto oculto pode ser selecionado. Quando ocorre a seleção, a marca de reticências é ocultada e substituída por texto.
Este atributo fornece uma maneira eficiente de fazer marcação de omissão em DHTML.
2. quebra de palavras
A propriedade mais comumente usada para controlar a quebra de linha é frequentemente usada em combinação com a quebra de linha abaixo.
gramática:
quebra de palavra: quebra normal, guarda tudo
Valor:
normal: valor padrão. Permitir quebras de linha entre palavras
break-all: Este comportamento é igual ao normal para idiomas asiáticos. Também são permitidas quebras em qualquer palavra de uma linha de texto em idioma não asiático. Este valor é adequado para texto asiático que contém algum texto não asiático
keep-all: igual ao normal para todos os idiomas não asiáticos. Para chinês, coreano e japonês, quebras de palavras não são permitidas. Bom para texto não asiático com uma pequena quantidade de texto asiático
ilustrar:
Define ou recupera o comportamento de quebra automática de texto para texto dentro de um objeto. Especialmente quando aparecem vários idiomas.
Para chineses, deve-se usar break-all. [Página cortada]
3. quebra de linha
Se a página da web que você cria não tiver largura adaptável, será necessário configurá-la para quebrar palavras, caso contrário, a página poderá ficar escalonada.
gramática:
quebra de linha: quebra de palavra normal
Valor:
normal: valor padrão. Permitir que o conteúdo se estenda além dos limites especificados do contêiner
break-word: O conteúdo ultrapassará os limites. Se necessário, também ocorrerá quebra de palavras
ilustrar:
Define ou recupera se a linha deve ser quebrada quando a linha atual exceder o limite do contêiner especificado.
Esta propriedade funciona apenas em objetos de layout, como objetos de bloco. Para usar esse atributo para elementos embutidos, você deve primeiro definir o atributo de altura ou largura do objeto, ou definir o atributo position como absoluto, ou definir o atributo display como block.
4. estouro, estouro-x, estouro-y
Isso não controla estritamente o estilo de quebra de linha, mas defini-lo como oculto pode complementar as deficiências da quebra de linha em determinados momentos. Por exemplo, você deseja exibir apenas uma linha de texto dentro da largura limitada, mas o comprimento desta linha. do texto excede essa largura, combinado com espaço em branco + estouro de texto pode obter melhores resultados.
gramática:
overflow: rolagem oculta automática visível
Valor:
visível: valor padrão. Não corta conteúdo nem adiciona barras de rolagem. Se este valor padrão for declarado explicitamente, o objeto será cortado nas dimensões da janela ou moldura que o contém. E a configuração do atributo do clipe será inválida
auto: O conteúdo do objeto será cortado ou barras de rolagem serão exibidas quando necessário
oculto: não exibe conteúdo que exceda o tamanho do objeto
scroll: sempre mostra barras de rolagem
ilustrar:
Recupera ou define como o conteúdo do objeto é gerenciado quando excede a altura e a largura especificadas.
O valor padrão para todos os objetos é visível, exceto para objetos textarea e objetos body, onde o valor padrão é auto. Definir o valor desta propriedade de um objeto textarea como oculto ocultará suas barras de rolagem.
Para tabelas, se o atributo table-layout estiver definido como fixo, o objeto td suportará o atributo overflow com um valor padrão oculto. Se definido como rolagem ou automático, o conteúdo que exceder o tamanho td será cortado. Se definido como visível, fará com que o texto extra transborde para as células à direita ou à esquerda (dependendo da configuração da propriedade de direção).
Esta propriedade está disponível em plataformas MAC começando com IE5.
A partir do IE6, esse atributo pode ser aplicado a objetos HTML quando você especifica o modo compatível com os padrões usando a declaração !DOCTYPE.