Como inserir uma quebra de linha antes de um elemento usando CSS

170

Sinto que vi uma maneira, usando a propriedade CSS content, de inserir uma tag de quebra de linha antes de um elemento. Obviamente, isso não funciona:

#restart:before { content: '<br/>'; }

Mas como você faz isso?

css

— mheavers
fonte

2

CSS não é para adicionar ou editar conteúdo, é para controlar como o conteúdo é exibido.

— Todd Moses

40

Parece-me que o layout e o fluxo (quebras de linha também podem ser consideradas) estão definitivamente dentro do domínio do CSS.

— Trevor

12

CSS é absolutamente para adicionar ou editar conteúdo quando é um elemento de estilo consistente que faz parte do seu tema. Especialmente com sistemas de gerenciamento de conteúdo como o Wordpress, que não permitem editar seu conteúdo, é altamente útil. É por isso que a propriedade "content" existe. Para adicionar e / ou editar conteúdo.

— Fei Lauren

266

É possível usar a \A sequência de escape no conteúdo gerado pelo elemento psuedo. Leia mais na especificação CSS2.

#restart:before { content: '\A'; }

Você também pode precisar adicionar white-space:pre;a #restart.

Nota: \A denota o final de uma linha.

ps Outro tratamento a ser

:before { content: ' '; display: block; }

— estante de livros
fonte

11

Tente também o espaço em branco: pré-enrole; se você deseja que seu texto seja quebrado.

— quer

6

Brilhante. Deve-se notar, porém, que para que isso funcione - #restarttambém deve serdisplay: inline;

— Troy Alford

23

Isso não funcionou para mim, eu usei :before { content: ' '; display: block; }.

— Bogdanio

1

Por alguma razão, nenhuma das soluções funciona com inline-blockelementos. Eles simplesmente não vão para a próxima linha. A única solução foi realmente acrescentar um vazio <div></div>no HTML.

— Adam Reis

2

Se a linha não quebrar, você pode usar a propriedade 'espaço em branco': antes de {content: '\ A'; espaço em branco: pré; }

— Amr

35

Se #restartfor um elemento embutido (por exemplo <span>, <em>etc), você poderá transformá-lo em um elemento de bloco usando:

#restart { display: block; }

Isso terá o efeito de garantir uma quebra de linha antes e depois do elemento.

Não existe uma maneira de o CSS inserir algo que funciona como uma quebra de linha somente antes de um elemento e não depois. Talvez você possa causar uma quebra de linha antes como efeito colateral de outras alterações, por exemplo float: left, ou clear: leftapós um elemento flutuante, ou mesmo algo doido, #restart:before { content: 'a load of non-breaking spaces'; }mas isso provavelmente não é uma boa ideia no caso geral.

— bobince
fonte

1

Não pode ser exibido: block - porque, então, eu precisaria exibir uma largura para o elemento para impedir que seu plano de fundo corresse por toda a página. Ele precisa ser capaz de definir automaticamente a largura do elemento.

— Mheavers 9/09/11

3

Um float: leftelemento pode ser de alguma utilidade, pois eles se ajustam e começam em uma nova linha. Caso contrário, o que você deseja pode não ser possível.

— 22911

Às vezes, os desenvolvedores trabalham em um grande projeto em que não têm controle ou não podem tomar a decisão de aplicar outra solução.

— precisa saber é

19

Isso funciona para mim:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

— hutorny
fonte

Por alguma razão, os vários caracteres unicode da nova linha não estavam funcionando para mim ..? Esta solução fez o truque embora - obrigado!

— Gene Bo

1

Sim, mas o que acontece quando você também precisa inserir texto no conteúdo !? resposta

— Sándor Zuboly,

12

Basta colocar um caractere de nova linha unicode no pseudo elemento anterior:

#restart:before { content: '\00000A'; }

— Jesse Kinsman
fonte

11

O seguinte CSS funcionou para mim:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

— rluks
fonte

Excelente idéia com css simples

— NaveenDA

Funcionou como um encanto para mim. Eu estou usando isso: #content: 'bar: \a' attr(data-description);

— Jimmy Adaro

Esta é a resposta correta cron

— cronoklee 19/06

10

Há duas razões pelas quais você não pode adicionar conteúdo gerado via CSS da maneira que desejar:

o conteúdo gerado aceita conteúdo e não marcação. A marcação não será avaliada, mas exibida apenas.
:beforee o :afterconteúdo gerado é adicionado dentro do elemento, portanto, mesmo adicionando um espaço ou letra e definindo-o como blocknão funcionará.

Há um ::outsidepseudo elemento que pode fazer o que você deseja. No entanto, parece não haver suporte ao navegador. (Leia mais aqui: http://www.w3.org/TR/css3-content/#wrapping )

A melhor aposta é usar um pouco de jQuery aqui:

$('<br />').insertBefore('#restart');

Exemplo: http://jsfiddle.net/jasongennaro/sJGH9/1/

— Jason Gennaro
fonte

"Usando CSS". Encontrei uma resposta semelhante ao trabalho de Jesse Kinsman.

— precisa saber é o seguinte

4

Sim, totalmente factível, mas é definitivamente um hack total (as pessoas podem lhe dar uma aparência suja por escrever esse código).

Aqui está o HTML:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

Aqui está o CSS:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

Aqui está o violino: http://jsfiddle.net/AprNY/

— hammerbrostime
fonte

+1 Para criatividade. Eu tenho algo que estou incluindo de uma fonte externa e não pode alterar o HTML real ... isso parece funcionar muito bem :) Obrigado!

— counterbeing

3

Tente o seguinte:

#restart::before {
  content: '';
  display: block;
}

— do utilizador
fonte

Uma dica: adicione pelo menos um comentário de uma linha, para que suas postagens não acabem no VLQQ por padrão.

— Deduplicator

1

supondo que você queira que a altura da linha seja 20 px

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

— Kareem
fonte

1

Não tive sorte em inserir uma quebra com: antes. Minha solução foi adicionar um intervalo com uma classe e colocar a pausa dentro do intervalo. Em seguida, mude a classe para exibir: none; ou exibir: bloqueie conforme necessário.

HTML

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

CSS

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

Espero que isto ajude.

— Roger
fonte

1

Você pode preencher seu documento com <br>tags e ativá-los \ off com css, como qualquer outro:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

— JackHammer
fonte

0

Você também pode usar a entidade HTML pré-codificada para uma quebra de linha 
no seu conteúdo e isso terá o mesmo efeito.

— Henry Gibson
fonte

0

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 O Proerty de conteúdo, "novas linhas" ... p não adicionará margem nem preenchimento no final de p dentro do bloco pai (por exemplo, corpo ›seção› p) A quebra de linha "\ A" força o espaço da linha, altura-estilo equivalente.

— Mark Stewart
fonte

-1

Adicione um margin-top:20px;a #restart. Ou qualquer diferença de tamanho que você considere apropriada. Se for um elemento em linha, você precisará adicionar display:blockou, display:inline-blockembora eu não ache que inline-blockfuncione em versões mais antigas do IE.

— punkrockbuddyholly
fonte

Não, o problema é que o tipo de exibição do elemento é um bloco embutido, portanto, preciso fazer uma pausa antes do elemento.

— Mheavers 09/09

o tipo de exibição já está em bloco embutido. Estou tentando fazer o que pedi acima, usando a propriedade content.

— Mheavers 9/09/11

Você não pode adicionar elementos html usando a propriedade content, isso não é possível.

— punkrockbuddyholly

porque sua resposta não teria resolvido o problema dele. Veja a resposta vencedora, que detalha uma maneira de fornecer uma quebra de linha usando a propriedade content (que não aceita elementos html). Talvez tenha sido um mal-entendido da pergunta original.

— Pdwalker 11/09/14

-1

Em vez de adicionar manualmente uma quebra de linha de alguma forma, você pode implementar o border-bottom: 1px solid #ff0000que assumirá a borda do elemento e renderizará apenas border-<side>o lado que você especificar.

— andy4thehuynh
fonte

2

O OP pediu pelo equivalente a <br>, não <hr>.

— Beni Cherniavsky-Paskin