P tag one line ellipsis overflow - css

Question

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?

Answer 1

p {
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

➪ Codepen

note: Your (OPs) codepen contains some stuff, that shouldn't be. (do not work on :after, don't use inline-block, ...)