Question

我有一个容器，消息得到回应，消息本身没有固定的大小，因为用户生成，但是如果提交的文本字符串过长则可能会过流它的容器打破了设计..

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

你可以通过使用overflow:hidden显然可以阻止这种情况发生，但我希望采用更多的方法，而不是直接切断它。我似乎记得用css3读到这样的事情，但是因为我的生活无法弄清楚它叫什么。

Answer 1

CSS属性text-overflow:ellipsis，但浏览器支持各不相同

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

Answer 2

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

那应该为你做。所有这些都需要包括在内。

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

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

它并不适用于所有浏览器，但对大多数人来说应该是好的： http://caniuse.com/#feat=text-overflow

Answer 3

使用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/

Answer 4

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

老实说，为一个段落添加省略号很简单，但对单行文本来说非常简单。

Answer 5

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

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

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

正在开展业务的那一位是General Sibling选择器“〜”（代字号）。现代浏览器对它的支持非常可靠。

从过度运行容器中停止文本

5 个答案: