如何在字符串中隐藏x个字符 [英] how to hide over x chars in a string

问题描述

如果项目描述太长，则非常常见，

但是如何显示呢？

我在想

  if string length is> x 
在位置x后插入a< span classs =more> //可能我会这样做通过php 
插入在字符串的结尾< / span> 
 hide.more// css& javascript隐藏和显示
  

，然后您可以使用类似的技术： toogle parent的元素与父级

您看到任何

解决方案

没有JavaScript，你可以做到，假设你不在乎旧的浏览器的支持理解CSS ：hover 伪类（例如，IE6只对：hover ; a> 元素）。

这样：

 < style> 
 .full {display：none; } 
 .shortened：hover .full {display：inline; } 
< / style> 
 
< span class =simplified>这是一些已剪裁< span class =full>的文字< / span>< / span> 
  

如果这不是很明显，第一个CSS选择器隐藏所有元素的类充分。第二个选择器显示类别为full的元素，如果它们是一个具有缩写类并且鼠标也在其上的元素的子元素。

是外部跨度之后的其他元素，它们将临时移动以腾出空间，同时额外的文本是可见的 - 避免这种情况的一个简单方法如下（调整以适应您的喜好）：

  .shortened {position：relative; } 
 .full {display：none; position：absolute;} 
 .shortened：hover .full {display：inline; z指数：100; background-color：white;} 
  

it's very common to substring an item description if it's too long,

But how could show it back?

i was thinking

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

and then you can simply use a technique like: toogle parent's element with parent

Do you see any alternative for this?

解决方案

You can do it without JavaScript assuming you don't care about support for old browsers that don't understand the CSS :hover pseudo-class (e.g., IE6 only does :hover for <a> elements).

Something like this:

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

In case it's not obvious what this is doing, the first CSS selector hides all elements with the class "full". The second selector shows elements with the class of "full" if they are a child of an element with class "shortened" that also has the mouse over it.

If there are other elements after the outside span they'll temporarily move over to make room while the extra text is visible - a simple way to avoid this is as follows (tweak to suite your taste):

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

这篇关于如何在字符串中隐藏x个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！