Il testo dell'intestazione sfugge da wrapper: html, css, laravel-blade

Sui dispositivi mobili il testo dell'intestazione sfugge da div wraper. Come posso impedirlo? Succede solo quando rimangono 2 caratteri. E se possibile fallo solo con CSS puro (jQuery se necessario).

HTML (Laravel-Blade)

@section("content")
@if($builds)
@foreach($builds as $result)
<div class="col-md-4">
<div class="builds">
<img src="/images/{{ $result->icon }}" class="img-responsive" alt="Hero icon" />
<div class="text">
<h2>{{ $result->name }} - {{ $result->build }}</h2>
<i><span class="usercolored">{{ $result->created_by }} </span>,{{ date("d-m-Y", strtotime($result->date)) }} <br /> {{ $result->views }} zobrazení</i><br />
<button class="btn btn-primary btn-md">Přejit na build</button>
</div>
</div>
</div>
@endforeach
@else
<p>Nic nenalezeno</p>
@endif
@endsection

CSS

.builds {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
height: 191px;
margin-top: 10px;
}

.builds h2{
margin: 0;
}

.builds:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.builds img {
width: 171px;
height: 191px;
float: left;
}

.builds .text {
margin-left: 180px;
}

risposte:

.builds h2{
word-wrap: break-word;
//word-break: break-all;
}

Ho creato un esempio per te per capire come funziona: gli esempi vanno bene per una parola insolitamente lunga all'interno di un contenitore relativamente piccolo che non si adatta.

div {
width: 100px;
border: 1px solid red;
}

/* word-wrap: break-word recently changed to overflow-wrap: break-word. */
.overflow {
/* A long word/string will break in random places.
A hyphen character will not be inserted. */
overflow-wrap: break-word;
}

/* A very long word WILL NOT start at the point it should start.
It will be wrapped to next line and then being broken. */
.word-wrap {
word-wrap: break-word;
}

/* Avery long word starts at the point it
should start and it is being broken. */
.word-break {
word-break: break-all;
}

Normal:
<div>I am a text that 0123456789012345678901234567890123456789</div><br>

overflow-wrap: break-word;
<div class="overflow">I am a text 000001234567890123456789</div><br>

word-wrap: break-word;
<div class="word-wrap">I am a text 000001234567890123456789</div><br>

word-break: break-all;
<div class="word-break">I am a text 000001234567890123456789</div><br>

prova questo

word-break: break-all;