Recuo a partir da segunda linha de um parágrafo com CSS

103

Como posso recuar a partir da segunda linha de um parágrafo?

eu tentei

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

e

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

e

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

— Reuben
fonte

Por que todo o recuo do texto da primeira linha está definido como 0? Além disso, não sei como fazer isso, mas o que está faltando nesta lista é o que faz mais sentido para mim, o preenchimento.

— Skarlinski

211

É literalmente apenas a segunda linha que você deseja recuar ou é a partir da segunda linha (ou seja, um recuo deslocado )?

Se for o último, algo na linha deste JSFiddle seria apropriado.

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

Expandir trecho

Este exemplo mostra como usar a mesma sintaxe CSS em um DIV ou SPAN produz efeitos diferentes.

— redditor
fonte

3

@Reuben Com base em seu comentário que agora foi excluído, suponho que você realmente quis dizer FROM da segunda linha - e para o bem dos visitantes futuros, talvez este violino seja melhor, onde a sintaxe é P, não div ou span. jsfiddle.net/gg9Hx

— redditor

1

Por que o padding-left e então o negativo text-indent? Por que deve funcionar assim? Parece estranho. Por que não apenas um positivo text-indent?

— Don Cheadle

2

O recuo de texto não tem efeito na extensão. Ele pode ser removido do estilo do vão para o mesmo resultado.

— Sam Hasler

25

Faça a margem esquerda: 2em ou mais irá empurrar todo o texto, incluindo a primeira linha, para a direita 2em. Em seguida, adicione o recuo de texto (aplicável à primeira linha) como -2em ou mais. Isso traz a primeira linha de volta ao início sem margem. Eu tentei para tags de lista

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>

— Vineetma
fonte

24

Isso funcionou para mim:

p { margin-left: -2em; 
 text-indent: 2em 
 }

— xoandre
fonte

10

Isso parece fazer o oposto do que o OP pediu. A versão do @techillage está correta. Você precisa trocar o

— sinal de

1

Isso é quase exatamente o que eu precisava. A resposta aceita não funcionará para mim porque não tenho liberdade no meu CMS para adicionar spans dessa forma. O único problema que tive com a solução aqui, é que a margem esquerda puxará o parágrafo inteiro para fora de um contêiner. Então adicionei 'position: relative' e 'left: 2em' e ficou perfeito. Ao contrário do comentário de @AlexHolsgrove, a resposta do techillage não funcionou para mim, mas talvez porque eu não estou fazendo isso em um elemento da lista.

— Stu Furlong

2

Eu precisei recuar duas linhas para permitir uma primeira palavra maior em um para. Uma solução única e complicada é colocar o texto em um elemento SVG e posicioná-lo da mesma forma que um <img>. Usar float e a tag de altura do SVG define quantas linhas serão indentadas, por exemplo

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

A altura e a largura do SVG determinam a área bloqueada.
Y = 36 é a profundidade da linha de base do texto SVG e igual ao tamanho da fonte
margin-top's permitem o melhor alinhamento do texto SVG e para o texto
Usei as duas primeiras palavras aqui para lembrar o cuidado necessário para descendentes

Sim, é complicado, mas também independente da largura da div que o contém.

A resposta acima foi à minha própria consulta para permitir que a (s) primeira (s) palavra (s) de um para sejam maiores e posicionadas em duas linhas. Para simplesmente recuar as duas primeiras linhas de um para, você pode substituir todas as tags SVG pela seguinte imagem de pixel único:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />

— Tony
fonte

2

Há um rascunho de trabalho CSS3 que (espero em breve) permitirá que você escreva apenas:

p { text-indent: 200px hanging; }

Fique de olho em: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

— Nasia Makrygianni
fonte

1

Se você estilizar como lista

você pode "alinhar o texto: inicial" e as linhas subseqüentes serão recuadas. Sei que isso pode não atender às suas necessidades, mas estava verificando se havia outra solução antes de alterar minha marcação.

Acho que colocar a segunda linha também funcionaria, mas requer pensamento humano para que o conteúdo flua corretamente e, é claro, quebras de linha rígidas (o que não me incomoda, por si só).

— Morrie
fonte

1

bem-vindo ao Stackoverflow. Parece que você tem uma solução para esse problema de indentação. No entanto, seria de grande ajuda para todos se você fornecer alguma marcação e explicar a solução. Pode ser que você possa usar jsfiddle.net ou outro serviço para criar uma demonstração funcional. Muito bem sucedida.

— EGL 2-101