Question

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

这听起来很容易 - 但我一直在努力

这就是我到目前为止 -

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;
}

➪Codepen

注意：您的（OP）codepen包含一些不应该的东西。（不要工作：之后，不要使用内联块，...）

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

2 个答案: