Como envolver o texto em uma imagem usando HTML / CSS


106

Quero criar um bloco de texto como a seguinte imagem:

insira a descrição da imagem aqui

Pergunta se isso é possível?



Você está tentando envolver o texto em uma imagem como em <p>tags regulares e assim por diante, mas também mencionou <textarea>, o que pode ser um problema totalmente diferente. Por que você não publica seu HTML, se tiver algum? Obrigado.
Marc Audet

1
Sim, você apenas flutuaria a imagem php para a esquerda e o texto a envolveria :-)
Jack Tuck

Todos esses comentários e nenhuma resposta aceita ...
Dave Kanter

Respostas:


111

você precisa do floatseu contêiner de imagem da seguinte maneira:

HTML

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

CSS

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

FIDDLE

http://jsfiddle.net/kYDgL/


51

Com CSS Shapes, você pode ir um passo além do que simplesmente flutuar o texto ao redor de uma imagem retangular.

Na verdade, você pode quebrar o texto de forma que ele tome a forma da borda da imagem ou polígono ao redor do qual você está envolvendo.

DEMO FIDDLE (atualmente trabalhando no webkit - caniuse )

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}
<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Além disso, aqui está uma boa lista de artigos separados sobre CSS Shapes


1
Existe alguma opção de como envolver "AROUND" o objeto para que o objeto possa estar no meio?
redestructa

@redestructa confira exclusões de CSS. Veja minha postagem: stackoverflow.com/a/19895616/703717 Atualmente é compatível apenas com o IE - caniuse.com/#feat=css-exclusions
Danield

20

Adição à resposta de BeNdErR :
O elemento "outro TEXT" deve ter float:none, como:

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>


esta é a única maneira de fazer isso funcionar. E a solução mais limpa.
andygoestohollywood

flutuar: nada foi o que me salvou! Continuei tentando flutuar: acertou o segundo elemento sem sucesso.
bkunzi01

11

Se o tamanho da imagem for variável ou o design for responsivo , além de envolver o texto, você pode definir uma largura mínima para o parágrafo para evitar que fique muito estreito.
Dê um pseudo-elemento CSS invisível com a largura de parágrafo mínima desejada. Se não houver espaço suficiente para caber esse pseudoelemento, ele será empurrado para baixo da imagem, levando o parágrafo com ele.

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

Acho que sua resposta pode me poupar um pouco de bacon. Eu estava tendo um problema com imagens flutuantes à esquerda empilhadas em um design responsivo. Com minha largura de imagem padrão sendo 30% e imagens em ambos os lados, às vezes eu poderia ter uma coluna de texto com apenas 4 caracteres de largura.
Sherwood Botsford
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.