2016-10-03 13 views
0

Codepenオーバフローしたとき:http://codepen.io/anon/pen/qaVRqwラップ子divのテキスト子div要素が

を私はテキストは、親のdivを超えて拡張する前にテキストをラップするinnerDivを取得しようとしています。すべてのテキストがinnerDivに表示されるようにするにはどうすればよいですか?

私は次のように使用してみましたが、彼らは私が探しているかなりのものではありません、次のとおりです。

overflow-wrap: normal; 
overflow-wrap: break-word; 

私はこの質問をGoogleに方法を考え出すのトラブルを抱えています。私は追加する必要がある負の埋め込みやマージンのいくつかの並べ替えがあると思いますか?

私はinnerDivの幅を使いこなしましたが、位置を変更すると、オーバーフローしない限り親を超えて拡張されますが、コンテンツは消えます。

編集:変更タイトル私は提出しなかったというのが私の最後の質問は

+0

それをキャンセル –

答えて

3

多くが、実際には、それを抜け出すために引き起こしている左の150ピクセルですですから、あなたのinnerDivに「幅」を追加することができます...マージン右に

#innerDiv { 
    position: relative; 
    left: 150px; 
    margin-right: 150px; /* add this */ 
    background: pink; 
} 
1

を思い出したので、内側のdivに「最大幅」を設定してみてください。これにより、テキストが選択した幅で折り返されます。

など。

#innerDiv { 
    max-width: 200px; 
} 
+0

うわー、私は笑恥ずかしいです。 –

+0

Do not be、それは私たちが学ぶ方法です:) –

+0

Ha ..ええ、まあ、私はしばらくの間コーディングしてきました、ちょうど何かばかげたことにこだわっていましたが、私は助けと励まげに感謝します。 –

1

方法#innerDivからmax-widthの追加について?あなたの例では

#innerDiv { 
    position: relative; 
    left: 150px; 
    max-width: calc(100% - 150px); 
    background: pink; 
} 

となります。

+0

ああ、それは私が探していたものです。ありがとうございました。 –

1

このコードをinnerDivに追加して、その幅にかかわらずouterDivに収まるようにします。

width: calc(100% - 150px); 

(何でも右オフセット/左がinnerDivであると150ピクセルの交換)複雑な回答の

0
position: relative; 
left: 100px; 
background: pink; 
/* width: 700px; */ 
width: calc(100% - 100px); 
関連する問題