1. Accueil
  2. Question et réponse
  3. CSS no text wrap

CSS no text wrap

2010-07-22 5 views
37

Veuillez vous reporter au code http://jsbin.com/eveqe3/edit, également cité ci-dessous.CSS no text wrap

J'ai besoin d'afficher le texte à l'intérieur de l'élément divs de telle manière que le texte n'apparaisse que dans la boîte verte avec la largeur spécifiée le reste de la ligne doit être masqué. Toutes les suggestions ... il vous plaît

<style> 
    #container{ 
    width : 220px; 
    } 
    .item{ 
    float:left; 
    border: 1px solid #0a0; 
    width: 100px; 
    height: 12px; 
    padding 2px; 
    margin: 0px 2px; 
    } 
    .clearfix{ 
    clear: both; 
    } 
</style> 
</head> 
<body> 
    <div id="container"> 
    <div class="item"> A very loooooooooooooooooooooong text </div> 
    <div class="item"> Another looooooooooooooooooooong text </div> 
    <div class="clearfix"> </div> 
    </div> 
</body> 
</html>​

Source

2010-07-22 Mithun Sreedharan

+0

Juste un FYI, si vous définissez votre taille à 12px, avec un rembourrage de 2px vous devez utiliser la taille de la police: 10px de sorte que la frontière ne ne couvre pas le bas des personnages. Je préfère utiliser l'EM comme mesure à la place, afin de mieux mettre à l'échelle les changements d'utilisateurs. –

+0

Assurez-vous d'afficher votre résultat dans tous les navigateurs cibles, car la police/taille diffère par défaut. –

+1

Sure @Mark, merci –

Répondre

104

De plus overflow: caché, utilisez

white-space:nowrap;

Source

2010-07-22 11:46:17

+0

ouais !, celui-ci est ce que je veux! –

14

Juste utiliser:

overflow: hidden; 
white-space: nowrap;

Dans les divs de votre article

Source

2010-07-22 11:37:14 Macmade

2

Utilisez le débordement de la propriété css. Par exemple:

.item{ 
    width : 100px; 
    overflow:hidden; 
    }

La propriété overflow peut avoir l'une des nombreuses valeurs telles que (cachées, défilement, visible) .. vous pouvez als contrôler le trop-plein dans une seule direction à l'aide overflow-x ou débordement-y.

Je ho

Source

2010-07-22 11:38:41 dejavu

+0

Veuillez voir 'overflow: hidden' appliqué ici jsbin.com/eveqe3/2/edit, la partie de la deuxième ligne est visible dans la boîte. Est-il possible d'éviter que le texte ne passe à la ligne suivante? –

Questions connexes

 Questions connexes