P tags single dot overflow - css

Question

I need a tag with one line p, which has 100% width of its parent and shows the end at the end - this requires a response, so it always shows characters that will fit on one line at any time.

It sounds easy, but I fought it

This is what I still have -

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 tell me where I'm wrong - or the best solution for this device?

Answer 1

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

➪ Codepen

Note: your code (OPs) contains some things that should not be. (do not work: after, do not use the built-in unit, ...)

Answer 2

This is achieved using the following CSS rules.

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