P标签一行省略号溢出 - css

Question

我需要一个单行 p 标签，它是其父级的 100% 宽度，并在末尾显示一个省略号 - 它需要具有响应性 - 所以它只在任何时候都显示适合一行的字符。

这听起来很简单 - 但我一直在努力

这是我到目前为止 -

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

谁能告诉我哪里出错了 - 或者更好的跨设备解决方案？

Answer 1

这是通过以下 CSS 规则实现的

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

Answer 2

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

? 代码笔

注意：您的（OP）codepen 包含一些不应该包含的内容。（不要在 :after 上工作，不要使用内联块，...）