Como fazer quebra de linha em CSS?

Perguntado por: oreis . Última atualização: 18 de maio de 2023
4.1 / 5 8 votos

A propriedade CSS word-break é usada para especificar se o navegador deve inserir ou não quebras de linha onde, normalmente, o texto vazaria de seu container.

O elemento HTML quebra-de-linha <br> produz uma quebra de linha em um texto (carriage-return). É útil para escrever poemas ou um endereço, onde a divisão de linha é significante. Não use <br> para aumentar o espaço entre as linhas de texto; para isso use a propiedade CSS margin ou o elemento <p> .

Para dividir uma DIV em duas colunas, basta considerar que a largura (width) total da tela é de 100%, logo, se queremos duas colunas então teremos outras duas DIVs de 50% de largura cada. O código CSS a seguir cria uma DIV com 50% de largura.

Como quebrar linha depois de um flex item
Como foi dito, . break deve ocupar 100% da largura do container ( flex-basis: 100% ), o item flexível de quebra precisa ficar na sua própria linha para conseguir isso.

Parágrafos indentados
Em determinadas páginas, existem elementos P que são usados para marcar legenda de imagens (ver a página “Imagens & legendas” como exemplo). Ali nós centralizamos as legendas marcadas como parágrafos e eles não são indentados. Uma só regra CSS ' p. caption {text-indent: 0} ' resolve.

Pressione ALT+ENTER para inserir a quebra de linha.

Basta indicar display: block . Esse é o padrão para div's, mas para links por exemplo o comportamento é de display: inline , logo o display: block deve ser suficiente no seu caso.

A tag div quando é criada por padrão tem o atributo em css "display:block". Todas as tags div vão ter essa característica, portanto ficaram na mesma linha. Assim, desde que as divs consigam estar na mesma linha ficam seguidas, se não existir espaço vão para a linha abaixo.

A tag <hr> é um elemento HTML que representa uma quebra de linha temática entre elementos HTML. O <hr> é exibido como uma linha horizontal separando os conteúdos de uma página web.

A tag <a> é usada para criar uma âncora de onde vincular, o atributo href é usado para onde endereçar o documento, e as palavras entre as tags de abertura e fechamento da âncora serão exibidas como um hipervínculo.

Basta utilizar a tag <br/> (break). Com isso, podemos incluir quantas linhas quisermos entre os parágrafos. Este método é muito utilizado para gerar um espaço diretamente no código HTML sem precisar estilizar no CSS.

A propriedade CSS word-wrap é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.

Podemos usar a propriedade CSS line-height para definir o espaçamento entre as linhas em um parágrafo. A propriedade define a altura de uma linha. Ao definir a altura da linha, o espaço entre as linhas aumentará ou diminuirá de acordo.

A propriedade CSS flex-wrap define se os itens flexíveis são forçados a ficarem na mesma linha ou se podem ser quebradas em varias linhas. Se o argumento for valido, ele define a direção em que as linhas são empilhadas.

A propriedade flex do CSS, define como um ítem será posicionado para no espaço disponível dentro de seu container.