html - keywords - seo meta tags

Conservar el ajuste normal de las palabras dentro de un contenedor absolutamente posicionado.

Question

Tengo un bloque de texto absolutamente posicionado dentro de un contenedor relativamente posicionado. El elemento posicionado absolutamente excede el límite derecho de su contenedor.

El problema es: el texto no se está ajustando normalmente; se está rompiendo prematuramente en lugar de expandirse a su max-width definido:

Comportamiento observado:

Comportamiento deseado

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>

Nota: Un par de cambios que parecen lograr el comportamiento deseado, pero que no son exactamente lo que estoy buscando, incluyen:

• definiendo min-width: 150px en .text (el texto podría ser solo una palabra, y no quiero que el contenedor sea demasiado grande)
• posicionamiento. relativo al documento, en lugar de a .container (debe aparecer al lado del contenedor, incluso cuando se cambia el tamaño del navegador)

Answer 1

Aquí hay una estrategia que puede usar que debería funcionar en Chrome, FF, Safari e IE11 cuando lo probé por última vez.

Básicamente, la idea es engañar al navegador para que piense que tienes el ancho. Las respuestas anteriores funcionan bien, pero si reduce el ancho del contenedor principal, notará que su contenido comienza a ajustarse cuando alcanza el ancho del contenedor principal. Por lo tanto, la idea de evitar esto es usar otro contenedor que esté ubicado donde desea anclar su contenido, y luego colocar su contenido con respecto a esa cosa.

La diferencia aquí es que usaremos el primer contenedor posicionado para establecer el ancho máximo deseado. Como ese contenedor tiene una altura de 0, ni siquiera lo verás.

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>

Answer 2

Trate de usar transform: translate(x, y); en lugar de position: absolute; left: x; top: y; position: absolute; left: x; top: y;

Answer 3

Trate de usar la position: relative; en .text

EDITAR: también colóquelo dentro de un envoltorio de posición absoluta con su ancho máximo personalizado

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

Y HTML :

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

Answer 4

cambie la posición absoluta a relativa, y ajuste .text en un elemento posicionado absolutamente.

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