css - 如何在特定宽度后替换冗长句子中的字母

Question

我正在开发一个 wordpress 网站。在这里查看，在页脚区域中，我列出了最新的帖子。但是在帖子标题很长的情况下，它显示为 2 行，我想仅在一行中显示单个帖子的帖子标题，并希望在最后实现一些点.....。我怎样才能做到这一点 ？

Answer 1

来自http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 2

如果您将文本限制为单行，则可以使用 CSS3 轻松完成此操作。您需要一个块级元素（在您的情况下，这将是<li>标签），使用 设置您希望文本占据的最大宽度width，然后设置overflow、white-space和text-overflow属性：

.title {
    overflow: hidden;
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

如果您需要多行文本，不幸的是 CSS 没有这种机制。我个人使用jquery dotdotdot没有问题。