如何隐藏字符串中的x个字符答案

【问题标题】：how to hide over x chars in a string如何隐藏字符串中的x个字符
【发布时间】：2011-09-22 11:19:50
【问题描述】：

如果项目描述太长，通常会使用子字符串，

但怎么能显示回来呢？

我在想

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

你有什么替代方案吗？

【问题讨论】：

似乎是一个很好的解决方案

标签： php javascript css

【解决方案1】：

假设您不关心对不理解 CSS :hover 伪类的旧浏览器的支持（例如，IE6 仅支持 :hover 用于 <a> 元素），您可以不使用 JavaScript。

类似这样的：

<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;}

【讨论】：

但您忽略了 x 位置检测 :)
哈，好吧，我假设你会像你在问题中所说的那样在 PHP 中这样做。我肯定会在服务器端做那部分。

【解决方案2】：

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

【讨论】：

当然，但这总是会导致等待请求......不是吗？
这取决于发出的请求数。根据我的经验，AJAX 调用非常便宜。您可以使用 jquery.Data 临时存储数据，这样您就不需要在每次用户单击显示/隐藏时获取它。如果您的描述很长，并且当用户可能看不到完整描述时不想返回完整描述，我只会建议您这样做。您之前提到的选项完全有效，但您询问是否有任何替代方案，这只是一个替代方案。它可能不适合您的项目，但它是一种选择。

【解决方案3】：

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

编辑：注意，您需要精确的每个字符剪切。然后，要使用我的建议，您将需要等宽字体（并且可能还需要 em 指定的框宽度）。

【讨论】：

听起来很迟钝，但你只能将 text-overflow:ellipsis 应用于带有word-wrap: nowrap 的文本，这意味着仅适用于单行文本 .. 幸运的是，有一个肮脏的黑客 - <pre> 默认有 word-wrap: nowrap，所以你可以在它上面做一个多行省略号，但你显然需要在之前插入换行符（使用 PHP、JS 或手动）..
Buuufff，好吧，谢谢你的信息，但我不认为这是我想要的解决方案，然后......