Skip to main content
adicionou 54 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Seu CSS está funcionando perfeitamente bem, só faltou entender como funciona o <p>. Por padrão, a largura de um parágrafo é 100%, mesmo que o texto contido neste não pegue toda a largura.

Para obter o efeito desejado, basta mudar essaesta característica com um float:left, ou mesmo um display:inline-block. Segue exemplo funcional:

.reduzido { float:left; background-color: #fc9 }

.texto { clear:both }
<p class="reduzido">CONSULTÓRIO</p>

<p class="texto">Texto texto texto texto texto texto texto.</p>

Desta forma você não tem que desestruturar seu HTML original para obter o efeito desejado, e o elemento continua com as características de bloco. Note que é conveniente usar clear:both ou ao menos clear:left no elemento seguinte, para garantir que ele comece na linha de baixo, pelo fato de ter deixado. Com o espaço para outras coisas depois do parágrafo, outros elementos podem ficar na mesma linha sem o clear.

Seu CSS está funcionando perfeitamente bem, só faltou entender como funciona o <p>. Por padrão, a largura de um parágrafo é 100%, mesmo que o texto não pegue toda a largura.

Para obter o efeito desejado, basta mudar essa característica com um float:left, ou mesmo um display:inline-block. Segue exemplo funcional:

.reduzido { float:left; background-color: #fc9 }

.texto { clear:both }
<p class="reduzido">CONSULTÓRIO</p>

<p class="texto">Texto texto texto texto texto texto texto.</p>

Desta forma você não tem que desestruturar seu HTML original para obter o efeito desejado, e o elemento continua com as características de bloco. Note que é conveniente usar clear:both ou ao menos clear:left no elemento seguinte, para garantir que ele comece na linha de baixo, pelo fato de ter deixado espaço para outras coisas depois do parágrafo.

Seu CSS está funcionando perfeitamente bem, só faltou entender como funciona o <p>. Por padrão, a largura de um parágrafo é 100%, mesmo que o texto contido neste não pegue toda a largura.

Para obter o efeito desejado, basta mudar esta característica com um float:left, ou mesmo um display:inline-block. Segue exemplo funcional:

.reduzido { float:left; background-color: #fc9 }

.texto { clear:both }
<p class="reduzido">CONSULTÓRIO</p>

<p class="texto">Texto texto texto texto texto texto texto.</p>

Desta forma você não tem que desestruturar seu HTML original para obter o efeito desejado, e o elemento continua com as características de bloco. Note que é conveniente usar clear:both ou ao menos clear:left no elemento seguinte, para garantir que ele comece na linha de baixo. Com o espaço para outras coisas depois do parágrafo, outros elementos podem ficar na mesma linha sem o clear.

adicionou 73 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Seu CSS está funcionando perfeitamente bem, só faltou entender como funciona o <p>. Por padrão, a largura de um parágrafo é 100%, mesmo que o texto não pegue toda a largura.

Para obter o efeito desejado, basta mudar essa característica com um float:left, ou mesmo um display:inline-block. Segue exemplo funcional:

.reduzido { float:left; background-color: #fc9 }

.texto { clear:both }
<p class="reduzido">CONSULTÓRIO</p>

<p class="texto">Texto texto texto texto texto texto texto.</p>

Desta forma você não tem que desestruturar seu HTML original para obter o efeito desejado, e o elemento continua com as características de bloco. Note que é conveniente usar clear:both ou ao menos clear:left no elemento seguinte, para garantir que ele comece na linha de baixo, pelo fato de ter deixado espaço para outras coisas na frentedepois do parágrafo.

Seu CSS está funcionando perfeitamente bem, só faltou entender como funciona o <p>. Por padrão, a largura de um parágrafo é 100%, mesmo que o texto não pegue toda a largura.

Para obter o efeito desejado, basta mudar essa característica com um float:left, ou mesmo um display:inline-block. Segue exemplo funcional:

.reduzido { float:left; background-color: #fc9 }

.texto { clear:both }
<p class="reduzido">CONSULTÓRIO</p>

<p class="texto">Texto texto texto texto texto texto texto.</p>

Desta forma você não tem que desestruturar seu HTML original para obter o efeito desejado, e o elemento continua com as características de bloco. Note que é conveniente usar clear:both no elemento seguinte, pelo fato de ter deixado espaço para outras coisas na frente do parágrafo.

Seu CSS está funcionando perfeitamente bem, só faltou entender como funciona o <p>. Por padrão, a largura de um parágrafo é 100%, mesmo que o texto não pegue toda a largura.

Para obter o efeito desejado, basta mudar essa característica com um float:left, ou mesmo um display:inline-block. Segue exemplo funcional:

.reduzido { float:left; background-color: #fc9 }

.texto { clear:both }
<p class="reduzido">CONSULTÓRIO</p>

<p class="texto">Texto texto texto texto texto texto texto.</p>

Desta forma você não tem que desestruturar seu HTML original para obter o efeito desejado, e o elemento continua com as características de bloco. Note que é conveniente usar clear:both ou ao menos clear:left no elemento seguinte, para garantir que ele comece na linha de baixo, pelo fato de ter deixado espaço para outras coisas depois do parágrafo.

Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Seu CSS está funcionando perfeitamente bem, só faltou entender como funciona o <p>. Por padrão, a largura de um parágrafo é 100%, mesmo que o texto não pegue toda a largura.

Para obter o efeito desejado, basta mudar essa característica com um float:left, ou mesmo um display:inline-block. Segue exemplo funcional:

.reduzido { float:left; background-color: #fc9 }

.texto { clear:both }
<p class="reduzido">CONSULTÓRIO</p>

<p class="texto">Texto texto texto texto texto texto texto.</p>

Desta forma você não tem que desestruturar seu HTML original para obter o efeito desejado, e o elemento continua com as características de bloco. Note que é conveniente usar clear:both no elemento seguinte, pelo fato de ter deixado espaço para outras coisas na frente do parágrafo.