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?

html css user1780343
fonte
1
possível duplicata de Wrapping text around a image with indentation and justify
mavrosxristoforos 04/10/2013
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/

BeNdErR
fonte
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>
Expandir trecho

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

Danield
fonte
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>
Expandir trecho

T.Todua
fonte
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;
}
Jithin B
fonte
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