2010-08-26 5 views
2

Je pourrais jurer avoir vu des articles sur ce problème, mais je ne peux pas pour la vie de moi les retrouver! Fondamentalement, si j'aiContenu de div non limité par div largeur

<div style="width: 250px;">The width of this div should be no less than 250px wide</div> 

Dans le code ci-dessous, le contenu de la div ne limite pas sa largeur à la largeur spécifiée provoquant un problème de débordement:

 <div class="PostIt"> 
      <div id="tags"><span class="qExtraLarge"><a href="Team/Default.aspx#lucky">Lucky Khumalo</a></span> 
      <span class="qLarge"><a href="Investments/Social/School/Default.aspx">School</a></span> 
      a;orghaepoht8aegae[hgi'aehg[ahgiha[e8gjaerghuoaeir'ghu;dsOsgh;vrwi/jbvh?URbnIRWhb'a[985h[qygherionhbdl</div> 

     </div> 

.PostIt { display: block; text-align: left; padding: 30px 30px 30px 30px; height: 240px !important; width: 190px !important; background: transparent url("Images/PostIt.png"); } 
.PostIf #tags { width: 250px !important; } 

Toute suggestion serait génial!

Merci d'avance.

Répondre

1

Définition d'une largeur sur un élément de bloc seul ne s'arrêtera tout contenu qui sont plus larges que la largeur de déborder les limites de l'élément. Pour ce faire, vous devez également définir la propriété "overflow". Le paramétrer sur "hidden" masquera tout ce qui est en dehors des limites, mais vous pouvez également définir d'autres valeurs pour afficher automatiquement les barres de défilement, etc.

Voir http://reference.sitepoint.com/css/overflow pour une bonne explication de la propriété CSS débordement.

+0

ne cachent trop-plein ou barres de défilement est assez bon, je dois Fondamentalement mis le mot enveloppe pour le contenu –

+0

ouais, long "mots" ininterrompu va toujours jouer le chaos avec votre mise en page. La propriété word-wrap est en CSS 3 mais elle est déjà bien supportée (elle a été inventée par MS il y a quelque temps). –

0

Masquer votre débordement.

Ou plus précisément

.myclass { overflow: hidden; } 
3

Si vous souhaitez masquer tout contenu qui déborde, utilisez overflow:hidden;

Si vous voulez afficher le contenu et la force juste un saut de ligne, utilisez word-wrap:break-word;

+0

Il semble que «word-wrap: break-word» n'a pas aidé. Je n'ai vu aucune différence du tout (en utilisant Google Chrome), mais j'ai remarqué un changement lorsque j'ai défini les marges du bloc ... –

+0

A travaillé pour moi. Merci! – MyCah

Questions connexes