élément forçant Emballage Word max-width

Je le balisage suivant (enfin, un cas repro pour le balisage réel):élément forçant Emballage Word max-width

<!DOCTYPE html> 
<html> 
<head> 
    <title>Wrapping Woes</title> 
    <style> 
     .button { 
     border: 1px solid black; 
     background: #CCFFCC; 
     min-width: 40px; 
     max-width: 80px; 
     height: 80px; 
     display: inline-block; 
     text-align: center; 
     vertical-align: top; 
     } 
     .button:hover { 
     background: #CCCCFF; 
     } 
    </style> 
    </head> 
    <body>   
    <span class="button"> 
     Lorem Ipsum 
    </span> 
    <span class="button"> 
     Dolor 
    </span> 
    <span class="button"> 
     Set Amet 
    </span> 
</body> 
</html>

Le contenu de bouton sont générés et inconnus. Mon problème est principalement avec le bouton "Lorem Ipsum" - malgré son emballage, il prend encore toute la largeur maximale (80px), quand idéalement je voudrais qu'il rétrécisse à la largeur du mot. C'est en fait le comportement dans IE7 Standards Mode, mais il ne semble pas en mode IE8 ou un navigateur conforme aux normes.

J'ai essayé width: 1px; mais cela a également entraîné le "Set Amet".

Comment puis-je rendre la largeur de l'élément dépendante du texte encapsulé, pas du texte pré-encapsulé?

Source

2010-12-14 XwipeoutX

J'ai fini par faire un emballage côté serveur. Je souhaitais seulement un emballage de 2 lignes au maximum, donc mettre manuellement un saut de ligne dans la marge a produit les résultats requis. Ne semble pas possible en CSS seulement.

Fondamentalement, j'ai remplacé l'espace du milieu par une nouvelle ligne si le texte contenait plus de 12 caractères. Pas parfait, mais ça marche assez bien.

Source

2011-01-09 22:10:20 XwipeoutX

élément forçant Emballage Word max-width

Répondre

Questions connexes