web-dev-qa-db-ja.com

絶対配置されたコンテナー内の通常のWordの折り返しを保持する

相対的に配置されたコンテナ内に絶対配置のテキストブロックがあります。絶対配置された要素がコンテナの右境界を超えています。

問題は、テキストが通常のように折り返されないことです。定義されたmax-widthに拡張するのではなく、途中で壊れてしまいます。

観察された動作：

enter image description here

望ましい動作

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>

注：目的の動作を実現しているように見えても、私が探しているものとは少し異なるいくつかの変更点は次のとおりです。

  • min-width: 150pxで.textを定義する（テキストは1つのWordである可能性があり、コンテナが特大になりたくない）
  • 配置.text。 .containerではなく、ドキュメントに対して相対的です（ブラウザーのサイズが変更された場合でも、コンテナーの横に表示する必要があります）
htmlcsscss-positionword-wrap
22
Emmett

.textでposition: relative;を使用してみてください

編集：カスタムの最大幅を使用して絶対配置ラッパー内に配置します

[〜＃〜] 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;
}

そして[〜＃〜] 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>
12
Bogdan Rybak

絶対位置を相対位置に変更し、.textを絶対位置の要素でラップします。

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

次のいずれかの方法を試してください。

アプローチ1：_position: absolute; left: x; top: y;_の代わりにtransform: translate(x, y);

アプローチ2：_width: max-content;_詳細については、 この答え を参照してください。

4
Ed Kolosovsky

これは、Chrome、FF、Safari、IE11で最後にテストしたときに機能する、使用可能な戦略です。

基本的に、アイデアは、ブラウザーをだまして幅があると思わせることです。上記の回答は問題なく機能しますが、親コンテナーの幅を縮小すると、コンテンツがその親コン​​テナーの幅に達すると、コンテンツが折り返され始めることがわかります。したがって、これを回避するためのアイデアは、コンテンツをアンカーする場所に配置された別のコンテナーを使用し、それに対してコンテンツを配置することです。

ここでの違いは、最初に配置されたコンテナを使用して、目的の最大幅を設定することです。このコンテナの高さは0なので、表示さえされません。

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