1

我有一个容器，消息被回显到其中，消息本身没有固定大小，因为它的用户生成，但是可能发生的情况是，如果提交的文本字符串太长，它可能会溢出它的容器打破设计..

有没有办法（希望只有 css，虽然 js 没问题）让框裁剪文本并留下它，...然后我可以在另一个页面上放置指向文本的链接。

你显然可以通过使用来阻止这种情况的发生overflow:hidden，但我想要一种更优雅的方法，而不是直接切断它。我似乎记得用 css3 读过类似的东西，但我一生都无法弄清楚它叫什么。

我已经在这里解决了这个问题 - http://jsfiddle.net/6Fk7B/

4

5 回答 5

1

CSS 属性text-overflow:ellipsis，尽管浏览器支持有所不同

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

于 2013-05-14T18:55:44.213 回答
1 
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

那应该为你做。都需要包括在内。

您可能还需要包含以下浏览器前缀：

-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;

它不会在所有浏览器中都是完美的，但它应该对大多数浏览器都有好处：http: //caniuse.com/#feat=text-overflow

于 2013-05-14T18:58:16.020 回答
0

使用 JavaScript，您可以使用substring. jQuery 不是必需的，但它使它更容易一点。

var myText = $('.myBox').text(), 
maxLength = 250, 
more = '...';

if (myText.length > maxLength) {
    myText = myText.substring(0, 250);

    $('.myBox p').text(myText + more);
}

请参阅我的示例：http: //jsfiddle.net/clrux/6Fk7B/14/

于 2013-05-14T19:00:35.130 回答
0

您可能想试用http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ 实际代码在这里http://codepen.io/romanrudenko/pen/ymHFh

老实说，为段落添加省略号很棘手，但对于单行文本却非常简单。

于 2013-05-14T19:06:30.940 回答
0

这对您来说是一个合理的起点吗？

小提琴：http: //jsfiddle.net/QkugN/

基本上，您将所有内容添加到div并使用overflow:hidden. 您还添加了一个选项卡，该选项卡在悬停时会显示其余内容。如果您对鼠标悬停状态使用绝对定位，则内容将暂时从流中删除，并允许覆盖任何周围的内容。它可能不是一个完整的解决方案，但它是一个你可以探索的纯 CSS 方向。

做生意的一点是通用兄弟选择器“~”（波浪号）。现代浏览器对它的支持非常可靠。

于 2013-05-14T19:38:00.897 回答