CSSは、テキストが行く「内部」のdivコンテナと部分的に隠された

Question

私は、ブートストラップ3、.media要素テキストが新しい行に壊れていない見ることができるよう

<div class="media"> 
    <div class="media-left"> 
    <a href="#"> 
     <img class="media-object" style="max-width: 70px;" 
      @if($listing->Agent->picture != '') 
      src="{{asset('files/agents_pics/'.$listing->Agent->picture)}}" 
      @else 
      src="{{asset('files/agents_pics/default/default.png')}}" 
      @endif 
     > 
    </a> 
    </div> 
    <div class="media-body"> 
    <h4 class="media-heading" >{{$listing->Agent->first_name .' '.$listing->Agent->second_name}} </h4> 
    <p style="margin: 0 0 2px;"><small>Email:</small> <a href="mailto:{{$listing->Agent->email}}">{{$listing->Agent->email}} </a></p> 

    <p style="margin: 0 0 2px;" ><small>Mobile:</small> <a href="tel:{{$listing->Agent->mobile}}">{{$listing->Agent->mobile}} </a></p> 
    <p><a href="" id="IDchangeAgentBtn" style="font-size: 17px;" class="btn btn-sm btn-info"> Show Contact Info </a></p> 
    </div> 
</div> 

を使用していますしかし、要素の下に行く、どのように私はそれを修正するのですか？テキストは改行されますか？

Answer 1

あなたは、このようなwhite-spaceとword-breakを指定する必要があります確認する：

.media .media-body p a, .media .media-body p, .media .media-body h4 { 
    white-space: normal; 
    word-break: break-word; 
} 

セレクタ.media .mediaボディPA、.media .media-体P、.media .mediaを指定することが重要ですこのスタイルがすでに存在する他のスタイルよりも優先度が高いことを確かめるために