Header misbehave on longer title - html

Question

I have problem with misbehaving header:
Code looks like this:
<div class="row row-grid">
<div class="col-sm-6 col-md-4 col-lg-4 col-xl-3">
<div class="box">
<div class="col-sm-12">
<h2 class="pull-right"><span class="label label-warning">1</span></h2>
<h3 class="pull-left shadow">
Piotrek z Bagien
<br>
<span><h4 class="gray shadow">Pinta</h4></span>
<span><h6 class="gray shadow">India Pale Ale (Poland)</h6></span>
</h3>
</div>
</div>
<div class="" id="sub-row">
<span class="col-sm-6 white-text">7 zł / 9 zł / 12 zł</span>
<span class="col-sm-6 white-text">5.2%/90 IBU</span>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 col-xl-3">
<div class="box">
<div class="col-sm-12">
<h2 class="pull-right"><span class="label label-warning">1</span></h2>
<h3 class="pull-left shadow">
Piotrek z Bagien India Pale Ale
<br>
<span><h4 class="gray shadow">Pinta</h4></span>
<span><h6 class="gray shadow">India Pale Ale (Poland)</h6></span>
</h3>
</div>
</div>
<div class="" id="sub-row">
<span class="col-sm-6 white-text">7 zł / 9 zł / 12 zł</span>
<span class="col-sm-6 white-text">5.2%/90 IBU</span>
</div>
</div>
</div>
What I want to achieve is to concat String with "..." if too long or other elegant solution that won't destroy whole layout.
edit: Almost there thanks to answer. Now it looks like this:
and I have two questions:
why left side of the concatenated text lost it's shadow?
how to make it work when screen gets smaller?

Answer 1

You can make trailing dots with something like this:
HTML
<div class="toolong">
this text is just too loooooooooooooooooooooooooong
</div>
CSS:
.toolong {
width: 300px;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
http://jsfiddle.net/jguaxbsg/