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.
white-space: nowrap;
emli span {...}
, mas tenho a impressão de que você está tentando fazer outra coisaRespostas:
O
span
elemento é 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>
é umblock
elemento, 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:left
sobre a imagem, você pode também colocarfloat:right
emli p
mas, nesse caso, você também vai precisartext-align:left
para 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}
fonte
span
para ump
elemento. 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, op
elemento é automaticamente ablock
e deixei a largura sozinha. Obrigado por isso.display:block
também pode usar um,div
pois é para isso que serve (ou usar ump
como você também sugeriu). Não há necessidade de dobrar o texto - se você estiver usando um,p
pode perder ospan
.div
, neste caso,p
faz mais sentido. Perder ospan
é meio trivial para mim e depende de como você está definindo seu conteúdo.<span>
em um<p>
é feitiçaria saído de Hogwartz! Funciona lindamente!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/
fonte
span
(caso do OP). Umdisplay: block
seria necessário para ospan
. Mas, guardando isso, concordo que é uma solução muito mais elegante. Caso alguém se pergunte qual é a magia por trásoverflow: hidden
, veja minha resposta abaixo.Para aqueles que desejam informações básicas, aqui está um pequeno artigo que explica por que
overflow: hidden
funciona. 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: hidden
cria 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:fonte
Se você quiser que o
margin-left
funcione em umspan
elemento, você precisará fazê-lodisplay: inline-block
oudisplay:block
também.fonte
vertical-align: top;
na imagem com isso, também.configuração
display:flex
para o texto funcionou para mim.fonte
overflow:auto
. Tenho certeza de que não funciona exatamente da mesma forma em todas as situações, mas funcionou para mim também.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%; } }
fonte