webentwicklung-frage-antwort-db.com.de

Behalten Sie den normalen Zeilenumbruch in einem absolut positionierten Container bei

Ich habe einen absolut positionierten Textblock in einem relativ positionierten Container. Das absolut positionierte Element überschreitet die rechte Begrenzung seines Containers.

Das Problem ist: Der Text wird nicht wie gewohnt umgebrochen. Es bricht vorzeitig ab, anstatt zu seinem definierten max-width zu expandieren:

Beobachtetes Verhalten:

enter image description here

Gewünschtes Verhalten

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>

Hinweis: Einige Änderungen, die das gewünschte Verhalten zu erreichen scheinen, aber nicht ganz das sind, wonach ich suche, umfassen:

  • definieren von min-width: 150px auf .text (der Text könnte nur ein Wort sein, und ich möchte nicht, dass der Container übergroß ist)
  • positionierung .text. Relativ zum Dokument und nicht zum .container (muss neben dem Container angezeigt werden, auch wenn die Größe des Browsers geändert wird)
20
Emmett

Versuchen Sie es mit position: relative; auf .text

BEARBEITEN: Legen Sie es auch in einen absolut positionierten Umschlag mit Ihrer benutzerdefinierten maximalen Breite

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

UndHTML:

<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

Ändern Sie die absolute Position in relative Position und binden Sie .text in ein absolut positioniertes Element ein.

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

Hier ist eine Strategie, die Sie verwenden können und die in Chrome, FF, Safari und IE11 funktionieren sollte, als ich sie zuletzt getestet habe.

Grundsätzlich besteht die Idee darin, den Browser zu täuschen, dass Sie die Breite haben. Die vorherigen Antworten funktionieren einwandfrei, aber wenn Sie die Breite des übergeordneten Containers verkleinern, werden Sie feststellen, dass der Inhalt umbrochen wird, wenn er die Breite dieses übergeordneten Containers erreicht. Die Idee, dies zu umgehen, ist, einen anderen Container zu verwenden, der dort positioniert ist, wo Sie Ihren Inhalt verankern möchten, und dann Ihren Inhalt in Bezug auf diese Sache zu positionieren.

Der Unterschied ist, dass wir diesen zuerst positionierten Container verwenden, um unsere gewünschte maximale Breite einzustellen. Da dieser Container eine Höhe von 0 hat, wird er nicht einmal angezeigt.

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

Versuchen Sie, transform: translate(x, y); anstelle von position: absolute; left: x; top: y; zu verwenden.

0
Ed Kolosovsky