Javascript 阻止文本在容器中过度运行

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

是否有一种方法（希望只使用css，尽管js是可以的）使框裁剪文本并保留一个

…

，然后我可以在另一个页面上放置指向文本的链接

显然，您可以使用

overflow:hidden

来阻止这种情况的发生，但我希望使用更为elegenat的方法，而不是直接切断它。我似乎记得在css3上读到过这样的东西，但我一生都搞不懂它叫什么

---

我在这里解决了这个问题-

CSS属性

文本溢出：省略号

，尽管浏览器支持各不相同

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

您可能还希望包括以下浏览器前缀：

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

它在所有浏览器中都不是完美的，但对大多数浏览器来说应该是好的：

---

使用JavaScript，您可以使用

子字符串来实现这一点。jQuery不是必需的，但它使它变得更简单了一点

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

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

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

请参阅我的示例：
您可能需要试用
实际代码在这里

老实说，在段落中加省略号是很难的，但在单行文字中加省略号却很简单。
这对你来说是一个合理的起点吗

小提琴：

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

执行业务的位是通用同级选择器“~”（tilde）。现代浏览器对它的支持相当可靠。
CSS的文本溢出：省略号在较新的浏览器中有效。好问题/好主意！我从未想过CSS解决方案。但是创建了几个JavaScript解决方案…可能重复，仅使用css处理不会允许您链接省略号。同意-css本身不会为您提供将内容添加到单独页面的功能。是否不可能只在服务器端传递一组字符？
var myText = $('.myBox').text(), 
maxLength = 250, 
more = '...';

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

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