Conserva il normale word wrapping all’interno del contenitore assolutamente posizionato

Ho un blocco di testo posizionato in modo assoluto all’interno di un contenitore relativamente posizionato. L’elemento posizionato in modo assoluto supera il limite destro del contenitore.

Il problema è: il testo non si sta avvolgendo normalmente; si sta rompendo prematuramente anziché espandersi alla sua max-width definita:

Comportamento osservato:

inserisci la descrizione dell'immagine qui

Comportamento desiderato

inserisci la descrizione dell'immagine qui

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

  .container { position: relative; width: 300px; background: #ccc; height: 100px; } .text { position: absolute; max-width: 150px; left: 290px; top: 10px; background: lightblue; }  
Lorem ipsum dolor sit amet

Nota: un paio di modifiche che appaiono per ottenere il comportamento desiderato, ma che non sono esattamente quello che sto cercando, includono:

  • definendo min-width: 150px su .text (il testo potrebbe essere solo una parola, e non voglio che il contenitore sia sovradimensionato)
  • posizionamento .text . relativo al documento, piuttosto che a .container (deve apparire accanto al contenitore, anche quando il browser viene ridimensionato)

Prova ad usare la position: relative; su .text

EDIT: anche metterlo in un involucro posizionata in assoluto con la larghezza massima personalizzata

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; } 

E HTML :

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

cambia la posizione assoluta in relativa e avvolge il testo in un elemento assolutamente posizionato.

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; } 

Ecco una strategia che puoi utilizzare che dovrebbe funzionare in Chrome, FF, Safari e IE11 quando l’ho testata per l’ultima volta.

Fondamentalmente, l’idea è ingannare il browser per pensare di avere la larghezza. Le risposte precedenti funzionano bene, ma se si riduce la larghezza del contenitore genitore, si noterà che il contenuto inizia a avvolgere quando raggiunge la larghezza di quel contenitore genitore. Quindi l’idea di aggirare questo è usare un altro contenitore posizionato dove vuoi ancorare il tuo contenuto, e quindi posizionare il tuo contenuto rispetto a quella cosa.

La differenza qui è che useremo il primo contenitore posizionato per impostare la larghezza massima desiderata. Dal momento che quel contenitore ha altezza 0, non lo vedrai nemmeno.

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

HTML

 
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

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%; } 
 
Standard shit pogchamp chatlethal
POGGERSPOGGERSPOGGERS POGGERSPOGGERSPOGGERS POGGERSPOGGERSPOGGERS POGGERSPOGGER S
Short
ReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLong

Prova a usare transform: translate(x, y); invece di position: absolute; left: x; top: y; position: absolute; left: x; top: y;