Faire du texte à l'intérieur d'un div en position absolue

J'ai une position absolue div avec du texte à l'intérieur, mais il déborde sur le bord de la largeur. Si j'utilise overflow:hidden, puis le dépassement disparaît. Cependant, je veux que le texte se répartit sur plusieurs lignes sur la durée de la hauteur.

Suis-je manqué quelque chose? Merci.

#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 44px;
height: 50px;
}

Regarde ce post : stackoverflow.com/questions/1638223/...
Il devrait être fait que par le par défaut.
Merci à tous. Je pense que j'ai tout compris. Le texte n'a pas d'emballage, car un div parent a été mis à nowrap.

OriginalL'auteur Lorenz | 2011-07-19

css stylesheet

4

Je bifurquais autour avec @alex jsfiddle exemple pour illustrer (de loin) le point qu'il faisait.

Le texte EST d'emballage; cependant, vous avez défini un hauteur. Un semi-rigide de hauteur de garder le div de l'expansion, qui est ce que je suppose que tu voulais. La quantité de texte et remplit l'espace est grandement va dépendre de votre line-height, font-size et tout autre CSS que vous avez peut-être appliqué pour le contenu du conteneur.

Dans le violon, je bifurquais, j'ai mis font-size:10px; line-height:1 - got 5 lignes de conditionnement de texte et le contenu restant sont cachés par la hauteur/largeur de paramètres que vous définissez dans vous de la déclaration.

http://jsfiddle.net/Kbzga/

word-wrap, white-space, overflow:visible sont probablement pas ce que vous êtes après, à moins que vous n'ayez pas l'esprit de la 44x50 boîte verte du texte qui déborde, ou des barres de défilement. HTH

OriginalL'auteur Dawson

@lorenz; pour envelopper le mot que vous avez à utiliser word-wrap propriété dans votre div comme afshin dit dans son commentaire
par exemple

#absolute_div

    {
        background-color: #8cc63f;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 0px 5px 0px 5px;
        width: 44px;
        min-height: 50px;
        overflow:hidden;
        word-wrap:break-word;
    }

cochez cette http://jsfiddle.net/aE8cg/

OriginalL'auteur sandeep

Pas entièrement sûr de ce que vous voulez faire, mais overflow:auto peut-être ce que vous êtes après.

#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 144px;
height: 50px;
overflow:auto;    
}

http://jsfiddle.net/jasongennaro/Vqukv/

OriginalL'auteur Jason Gennaro

0

Lorsque vous utilisez le positionnement absolu, et de définir une hauteur et une largeur, le contenu n'ont pas d'effet sur la boîte elle-même, donc vous avez juste à définir un min-height:50px, et il va grandir avec le texte tel qu'il apparaît ici, dans cette jsFiddle.

OriginalL'auteur ar3
0

J'ai eu un problème un peu comme ça pendant un moment.

J'avais une interface qui a été prise de la saisie de l'utilisateur avec de petites quantités de HTML qui affichera alors sur le côté pour montrer comment il voudrait.

Mon problème était que j'avais été la conversion de tous les espaces entré par l'utilisateur dans  , je voulais faire en sorte que les espaces peuvent être inscrits au format texte; ajouter des tirets et la comme.

L'effet, cependant, était qu'il était alors débordant au lieu d'envelopper le texte à l'intérieur de la div. Une solution facile est d'au lieu de convertir les deux espaces pour   , et de laisser des espaces simples seul.

Je me rends compte que ce n'est probablement pas la même cause pour tout le monde, mais j'espère que cela aide quelqu'un!

OriginalL'auteur Yasha

Cela a fonctionné pour moi...

white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;

OriginalL'auteur Levi Josman

Vous devez vous connecter pour publier un commentaire.