Adapting text to width of container - html

Question

I'm trying to adapt a few a elements to the total width of the container they are in.
This is the code that I currently have: http://codepen.io/anon/pen/FsgvI
HTML
<div class="box">
<div class="title">
<div class="something">
<h3>
This is foo
>
and then bar
>
and then test
</h3>
</div>
</div>
<div class="content">
asdijfg asoidf oasidf aosidf
</div>
</div>
CSS
.box {
border: 1px solid red;
display: inline-block;
}
.content {
border: 1px solid blue;
width: 170px;
height: 100px;
}
.title {
height: 30px;
}
h3, h3 > a {
text-overflow: ellipsis;
overflow: hidden;
}
How can I make the text adapt to the width of the box container? And by "adapt" I mean keep the current font size and cut (ellipsis) the text that doesn't fit inside.
Regards
Edit:
Sorry for the missunderstanding. I can't set a width to the box class because I don't know how wide it will be. I need it to be as wide as many items (content box) as there are.

Answer 1

This is possible with a few changes to your CSS.
Make .title position: relative; this will make h3 position relative to it
Make h3 position: absolute; to take it out of the document flow and give it width: 100%
Add white-space: nowrap; to h3 stop the contents wrapping onto the new line
Remove width: 170px; from .content to allow it to take up as much space as it needs
.box {
border: 1px solid red;
display: inline-block;
}
.content {
border: 1px solid blue;
height: 100px;
}
.title {
position: relative;
height: 50px;
width: 100%;
}
h3 {
position: absolute;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
<div class="box">
<div class="title">
<div class="something">
<h3>
This is foo
>
and then bar
>
and then test
</h3>
</div>
</div>
<div class="content">
asdijfg asoidf oasidf aosidf
</div>
</div>
Codepen: http://codepen.io/anon/pen/GgkJr

Answer 2

I had to add a width to the containing element and add the white-space: nowrap; to the .something div.
.box {
border: 1px solid red;
display: inline-block;
width:170px;
}
.content {
border: 1px solid blue;
width: 170px;
height: 100px;
}
.title {
height: 30px;
}
.something{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}