CSS para parar o envoltório de texto sob a imagem

87

Eu tenho a seguinte marcação:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

Eu quero que, se o texto quebrar, ele não vá para a 'coluna' da imagem. Sei que posso fazer isso com um table(o que estava fazendo), mas não é viável por esse motivo .

Tentei o seguinte sem sucesso:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

Eu também tentei float: right.

Obrigado.

EDIT: Eu quero que fique assim:

IMG   Text starts here and keeps going... and
      wrap starts here.

Assim não:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.
usuario
fonte
1
você pode colocar seu código em jsfiddle?
Hardik
Acho que você precisa ser um pouco mais claro sobre suas intenções aqui. Se você não quiser que o texto seja quebrado, você pode simplesmente usar white-space: nowrap;em li span {...}, mas tenho a impressão de que você está tentando fazer outra coisa
My Head Hurts
@MyHeadHurts Desculpas - pareceu claro para mim :) Quero duas colunas na linha. Os 20 pixels à esquerda são para uma imagem. O restante é para texto. Se o texto quebrar, quero que comece a segunda linha da quebra 20px da esquerda (abaixo de onde o texto inicial começou).
Nick
1
Para os transeuntes, você não precisa lidar com larguras como sugere a resposta aceita. É muito mais simples: crie o que é chamado de novo contexto de formatação . Veja a resposta de Joe Conlin. Para mais informações, veja o meu.
hqcasanova
1
@hqcasanova Para que conste, a resposta de Dan foi aceita 9 meses antes de Joe postar a sua e 16 meses antes de você a sua. Não vou deixar de aceitar a resposta de Dan, embora obrigado por adicionar alternativas.
Nick de

Respostas:

35

Como essa pergunta está ganhando muitas visualizações e essa foi a resposta aceita, senti a necessidade de adicionar a seguinte isenção de responsabilidade:

Essa resposta era específica para a pergunta do OP (que tinha a largura definida nos exemplos). Enquanto funciona, requer que você tenha uma largura em cada um dos elementos, a imagem e o parágrafo. A menos que essa seja sua exigência, recomendo usar a solução de Joe Conlin, que é postada como outra resposta a essa pergunta.

O spanelemento é um elemento embutido, você não pode alterar sua largura em CSS.

Você pode adicionar o seguinte CSS ao seu período para poder alterar sua largura.

display: block;

Outra maneira, que geralmente faz mais sentido, é usar um <p>elemento como pai para o seu <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Como <p>é um blockelemento, você pode definir sua largura usando CSS, sem precisar alterar nada.

Mas em ambos os casos, uma vez que agora você tem um elemento de bloco, você precisará fazer a imagem flutuar para que o texto não fique todo abaixo da imagem.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PS Em vez de float:leftsobre a imagem, você pode também colocar float:rightem li pmas, nesse caso, você também vai precisar text-align:leftpara realinhar o texto corretamente.

PSS Se você avançou com a primeira solução de não adicionar um <p>elemento, seu CSS deve ser assim:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
Dan
fonte
Isso é realmente útil. Eu mudei o spanpara um pelemento. Depois é só estes dois parecia fazer o truque: li p {margin-left: 40px} .fav_star {float: left}. A largura da imagem é definida pela própria imagem, o pelemento é automaticamente a blocke deixei a largura sozinha. Obrigado por isso.
Nick
2
Se você for usar, display:blocktambém pode usar um, divpois é para isso que serve (ou usar um pcomo você também sugeriu). Não há necessidade de dobrar o texto - se você estiver usando um, ppode perder o span.
Gareth
IMO, você não deve usar HTML para alterar o design de suas páginas. Este é o trabalho para CSS (há exceções, é claro, especialmente quando você precisa de compatibilidade entre navegadores). Acredito que usar HTML adequado e ter "boa semântica" é mais importante. Então, eu não usaria um div, neste caso, pfaz mais sentido. Perder o spané meio trivial para mim e depende de como você está definindo seu conteúdo.
Dan
Envolver um <span>em um <p>é feitiçaria saído de Hogwartz! Funciona lindamente!
Janus
252

Resposta muito simples para esse problema que parece pegar muita gente:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

Veja o exemplo: http://jsfiddle.net/vandigroup/upKGe/132/

Joe Conlin
fonte
11
Esta é a resposta certa para essa pergunta. Esta técnica não requer uma largura fixa para o parágrafo. Solução muito mais simples e fácil. Funciona perfeitamente, mesmo no IE8.
chocolata
4
Bem, na verdade isso não funcionará se o elemento que contém o texto for a span(caso do OP). Um display: blockseria necessário para o span. Mas, guardando isso, concordo que é uma solução muito mais elegante. Caso alguém se pergunte qual é a magia por trás overflow: hidden, veja minha resposta abaixo.
hqcasanova
7
Não é o comportamento que eu esperava, mas isso é incrível.
Gavin de
2
Só para constar, esta resposta veio 8 meses depois da que marquei :)
Nick
2
Uau. Funcionou perfeitamente. Não acredito que nunca soube disso antes.
SFlagg
25

Para aqueles que desejam informações básicas, aqui está um pequeno artigo que explica por que overflow: hiddenfunciona. Tem a ver com o denominado contexto de formatação de bloco . Isso faz parte das especificações do W3C (ou seja, não é um hack) e é basicamente a região ocupada por um elemento com fluxo do tipo bloco.

Cada vez que é aplicado, overflow: hiddencria um novo contexto de formatação de bloco. Mas não é a única propriedade capaz de desencadear esse comportamento. Citando uma apresentação de Fiona Chan, do Sydney Web Apps Group:

  • flutuar: esquerda / direita
  • estouro: oculto / automático / rolagem
  • display: célula da tabela e quaisquer valores / bloco embutido relacionados à tabela
  • posição: absoluta / fixa
hqcasanova
fonte
1
Você pode adicionar alguns detalhes desse artigo em sua resposta, caso o link fique inativo?
Bom dia Austrália! Obrigado pelo comentário.
hqcasanova 01 de
Isso é excelente para exibir blocos de código que podem ter que lidar com imagens ou barras laterais flutuantes próximas.
AlexMA,
A técnica, conforme descrito originalmente, funciona bem, embora, como outros disseram, não seja o comportamento que eu esperava. No entanto, não vejo que float ou bloco inline funcione sem estouro e, claro, valores de exibição relacionados à tabela e posição absoluta ou fixa tenham outras consequências de layout que podem ou não ser aceitáveis ​​no contexto.
enigment de
3

Se você quiser que o margin-leftfuncione em um spanelemento, você precisará fazê-lo display: inline-blockou display:blocktambém.

Gareth
fonte
Provavelmente precisa vertical-align: top;na imagem com isso, também.
ThinkingStiff de
2

configuração display:flexpara o texto funcionou para mim.

Mamrez
fonte
Este parece ser um equivalente mais moderno de cenário overflow:auto. Tenho certeza de que não funciona exatamente da mesma forma em todas as situações, mas funcionou para mim também.
Matt Browne de
1

Envolva uma div em torno da imagem e do intervalo e adicione o seguinte ao CSS da seguinte maneira:

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

MENOS

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }
9ete
fonte