CSS, geht Text 'innerhalb' der div-Container und teilweise versteckt

Question

Ich bin mit Bootstrap-3, .media Element

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

wie Sie Text nicht bricht in eine neue Zeile sehen Geht aber unter das Element, wie repariere ich es? Also wird der Text in eine neue Zeile umbrechen?

Answer 1

Um sicherzustellen, dass Sie white-space und word-break wie folgt angeben:

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

Es ist wichtig, den Wähler .media .media Körper pa, .media .media-Körper p, .media .media angeben -body h4 um sicher zu sein, dass dieser Stil eine große Priorität gegenüber anderen bereits vorhandenen Stilen hat.