pタグで囲まれていないテキスト

Question

内側にpタグが付いた2つの浮動小数点divがあります。 Pタグ内のテキストを折り返すと、あなたは、画像の下にテキストで見ることができるようにだけ、コンテナをオーバーフローしません：

 <div class="submenu"> 
      <h3>Destinations in Europe</h3> 
      <ul> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
      </ul> 
      <h3>Features</h3> 
      <div> 
       <img src="/assets/images/o/menu/city-feat-one.jpg" /> 
       <h4>blahblah</h4> 
       <p> 
        khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl 
       </p> 
      </div> 
      <div> 
       <img src="/assets/images/o/menu/city-feat-two.jpg" /> 
       <h4>blahblah</h4> 
       <p> 
        khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl 
       </p> 
      </div>   
     </div> 

マイCSS：

私のHTMLはそうのように見えます：

#rb-menu-com li .submenu > div { 
    width:48%; 
    float:left; 
    position: relative; 
} 

#rb-menu-com li .submenu div p { 
    color:#fff; 
    margin: 0; 
    padding:0; 
    width:100%; 
    position: relative; 
} 

#rb-menu-com li .submenu div img { 
    border:1px solid #fff; 
} 

誰もこれまでに経験したことがありますか？私はそうではありません！！私を怒らせる！

Answer 1

ワードラップにのみ発生追加します。

「単語」の長さがそれよりも長い場合は、それが壊れる場所はありません。

適切な解決策は、ナンセンスの文字列ではなく、実際のコンテンツを書き込むことです。ユーザーが生成したコンテンツを使用している場合は、例外的に長い単語のチェックを追加し、それらを許可しないでください（または、URLの一部をリンク内に残して切り捨てる）。

また、word-break CSS propertyを使用すると、単語の途中で改行をブラウザに伝えることができます。 （注：browser support）

また、overflowを使用して、コンテナに収まらないテキストを切り捨てることもできます。

Answer 2

float：leftプロパティを画像に追加します。

#rb-menu-com li .submenu div img { 
    border:1px solid #fff; 
    float:left; 
} 

Answer 3

このスタイルを<p>タグに付けます。あなたが継続的なテキストを持っているためである

p { 
    word-break: break-all; 
    white-space: normal; 
} 

Answer 4

、スペースなしに単一の長い単語を意味します。単語の切れ目がある場合にそれを破るためにword-break: break-all;

.submenu div p { 
    color:#fff; 
    margin: 0; 
    padding:0; 
    width:100%; 
    position: relative; word-break: break-all; background:red 
} 

DEMO

Answer 5

これは質問に対する回答ではありませんが、私が持っていた問題の答えを見ながらこのページを見つけたので、私はそれが私に多くの時間を要したとして私が見つけた解決策について言及したいと思います。希望では、これは他の人に役立つでしょう：

<の>タグ内のテキストはdivに折れないという問題がありました。最終的に、私はインスペクタを開き、すべての単語の間に '壊れない空間エンティティ'があることに気づいた。私のエディタviは、通常の空白を表示していました（何も見えないchr、私には分かりません）が、PDF文書のテキストを貼り付けてコピーしました。解決策は、viの中から空白をコピーし、それを空白のスペースで置き換えることでした。すなわち、 ：％s///g置き換えられる空白が問題のテキストからコピーされました。問題が解決しました。

Answer 6

ワードラップを使用して、コンテナ内の行に収まらない単語や連続した文字列を区切ることができます。

word-wrap: break-word; 

文字の単一の文字列を行に収まらない場合を除き、これはその場合には、それが壊れる、適切なブレークポイントでラインを壊していきます。

JSFiddle

Answer 7

まだを苦労して誰にも、確認し、問題のフォントに行の高さの値を設定しているかどうかを確認してください：それはワードラップをオーバーライドすることができます。

Answer 8

EASY

p{ 
    word-wrap: break-word; 
}