P tag one line ellipsis overflow - css

I need a one line p tag that is 100% width of its parent and shows an ellipsis at the end - it needs to be responsive - so it only ever shows the characters that will fit on one line at at any time.

This sounds easy - but I've been struggling with it

This is what i have so far -

css -

.cont p{
  width:70%;
  margin:0 auto;
  line-height:1;
  overflow:hidden;
  height:20px;
  font-size:20px;
}
.cont p:after{
  content:"...";
  display:inline-block;
}

http://codepen.io/anon/pen/bpevWv

Can anyone advise where i'm going wrong - or a better cross-device solution for this?