如何在字符串中隐藏超过x个字符

Question

如果商品描述太长，很常见的是对它进行子串，

但是怎样才能把它展示出来呢？

我在想

if string length is > x
   insert after position x a <span classs="more">   //probably i'd do this through php
   insert at the end of the string </span> 
   hide ".more"  //css & javascript to hide and show

然后，您可以简单地使用像这样的技术：toogle parent's element with parent

你认为这有什么替代方案吗？

Answer 1

如果你不关心对不理解CSS :hover伪类的旧浏览器的支持(例如，IE6只对<a>元素做:hover )，你可以不使用IE6来做这件事。

如下所示：

<style>
.full { display: none; }
.shortened:hover .full { display: inline; }
</style>

<span class="shortened">This is some text that <span class="full">has been cropped.</span></span>

如果不清楚这是在做什么，第一个CSS选择器会隐藏类为"full“的所有元素。第二个选择器显示具有"full“类的元素，如果它们是具有"shortened”类的元素的子元素，该元素也将鼠标悬停在该元素上。

如果在外部跨度之后有其他元素，它们将临时移动以腾出空间，而额外的文本可见-避免这种情况的简单方法如下(根据您的喜好进行调整)：

.shortened { position: relative; }
.full { display: none; position: absolute;}
.shortened:hover .full { display: inline; z-index: 100; background-color: white;}

Answer 2

您可以使用一个php脚本文件返回全文，然后使用ajax获取其余的描述并替换缩短的文本。

Answer 3

现代浏览器中的纯CSS：text-overflow: ellipsis;将剪切文本并在框的末尾显示…。您必须指定宽度/高度，这样文本才会溢出，而不是使容器变大。(在IE7+、FF4+、现代Webkits和Opera中受支持)

编辑:注意，你需要精确的每一个字符的剪切。然后，使用我的建议，e您将需要单空间字体(可能还需要em指定的框宽)。