web-dev-qa-db-fra.com

Préserver le texte normal dans un conteneur positionné de manière absolue

J'ai un bloc de texte positionné de manière absolue dans un conteneur relativement positionné. L'élément en position absolue dépasse la limite droite de son conteneur.

Le problème est le suivant: le texte n'est pas enveloppé normalement; c'est rompre prématurément plutôt que d'étendre à son max-width défini:

Comportement observé:

enter image description here

Comportement souhaité

enter image description here

HTML/CSS ( JSFIDDLE: http://jsfiddle.net/WmcjM/ ): 

<style>
.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 100px;
}

.text {
    position: absolute;
    max-width: 150px;
    left: 290px;
    top: 10px;
    background: lightblue;
}
</style>

<div class="container">
    <div class="text">Lorem ipsum dolor sit amet</div>
</div>

Remarque: Quelques modifications qui semblent donner le comportement souhaité, mais qui ne sont pas tout à fait ce que je recherche, incluent:

  • définition de min-width: 150px sur .text (le texte peut n'être qu'un mot, et je ne veux pas que le conteneur soit surdimensionné)
  • positionnement .text. par rapport au document, plutôt que par .container (il doit apparaître à côté du conteneur, même lorsque le navigateur est redimensionné)
htmlcsscss-positionword-wrap
20
Emmett

Essayez d'utiliser position: relative; sur .text

EDIT: Placez-le également dans un emballage à positionnement absolu avec votre largeur maximale personnalisée

CSS 

.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 300px;
}

.wrap_text {
    position: absolute;
    max-width: 200px;
    top: 10px;
}

.text {
    position: relative;
    left: 290px;
    background: lightblue;
}

EtHTML:

<div class="container">
    <div class="wrap_text">
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>
12
Bogdan Rybak

changez la position absolue en position relative et envelopper .text dans un élément en position absolue.

http://jsfiddle.net/WmcjM/4/

.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 300px;
}

.text {
    position: relative;
    /*min-width: 200px;*/
    left: 290px;
    background: lightblue;
}

.wrap {
    position: absolute;
    max-width: 200px;
    top: 10px;
}
6
kylecblyth

Voici une stratégie que vous pouvez utiliser et qui devrait fonctionner sous Chrome, FF, Safari et IE11 lorsque je l’ai testée pour la dernière fois. 

Fondamentalement, l’idée est de tromper le navigateur pour lui faire croire que vous avez la largeur. Les réponses précédentes fonctionnent bien, mais si vous réduisez la largeur du conteneur parent, vous remarquerez que votre contenu commence à s'afficher lorsqu'il atteint la largeur de ce conteneur parent. L'idée est donc d'utiliser un autre conteneur placé à l'endroit où vous souhaitez ancrer votre contenu, puis de positionner votre contenu par rapport à cet élément. 

La différence ici est que nous allons utiliser ce conteneur positionné en premier pour définir la largeur maximale souhaitée. Comme ce conteneur a une hauteur de 0, vous ne le verrez même pas.

JSFiddle: http://jsfiddle.net/WmcjM/252/

HTML

<div class="container">
  <div class="sizing-container">
      <div class="your-text">You can put whatever you want here and you can see that the content wraps when you hit your max-width, but that max-width is actually defined as the width of the sizing container</div>
  </div>
</div>

CSS

.container {
    position: relative;
    background: #ccc;
    width: 70px;
    height: 70px;
    margin-bottom: 100px;
}

.your-text {
    position: absolute;
    left: 0;
    top: 100%;
    background: lightblue;
    Word-break: break-Word;
}

.sizing-container {
    position: absolute;
    display: block;
    height: 0px;
    background: red;
    width: 200px; // This is your max-width!
    top: 16px;
    left: 100%;
}


.container {
    position: relative;
    background: #ccc;
    width: 70px;
    height: 70px;
    margin-bottom: 100px;
}

.monkaS {
    position: absolute;
    left: 0;
    top: 100%;
    background: lightblue;
    Word-break: break-Word;
}

.poggers {
    position: absolute;
    display: block;
/*     height: 1px; comment this in to see whats happening*/ 
    height: 0px;
    background: red;
    width: 200px;
    top: 16px;
    left: 100%;
}
<div class="container">
  <div class="poggers">
      <div class="monkaS">Standard shit pogchamp chatlethal</div>
  </div>
</div>

<div class="container">
  <div class="poggers">
      <div class="monkaS">P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S</div>
  </div>
</div>

<div class="container">
  <div class="poggers">
      <div class="monkaS">Short</div>
  </div>
</div>

<div class="container">
  <div class="poggers">
      <div class="monkaS">ReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLong</div>
  </div>
</div>

0
puopg

Essayez d'utiliser transform: translate(x, y); au lieu de position: absolute; left: x; top: y;

0
Ed Kolosovsky