功能在范围内动态缩短文本

Question

我有这样的跨度。

css: 
.menu {border:1px solid #000; width:200px; display:block; padding:3px;} 

html: 
<span class="menu">This is an example text</span> 
<span class="menu">Another text example</span> 

它打印此。

我已经设置了“跨越宽度”至200像素，因为文本的长度超过200像素，因此跨度大小调整为超过200像素。

我需要一个JavaScript或jQuery函数，所以它会打印这样的东西。它还在文本的末尾添加了“...”。

CSS样式也将接受...

Answer 1

我认为CSS属性text-overflow是你在找什么。但浏览器支持并不令人敬畏。但是在不支持的地方，也许只是在没有省略号的情况下剪切文本是可以的？

Answer 2

如果你没有使用省略号（...）的要求，一个跨浏览器的纯CSS的方法是：

1. 设定一个固定的与您的容器并设置overflow CSS属性到hidden。
2. 创建一个填充/覆盖层，以遮盖容器右端的一小部分。为此垫片提供背景图像，该图像是从透明到容器背景颜色的渐变。
3. 太长的文字会被裁剪。
4. 带渐变的垫片会使裁剪文本具有很好的淡出效果。

Answer 3

试试这个哥们....

<title>untitled</title> 
<style type="text/css" media="screen"> 
    .hide{ 
      display: none; 
    } 
    span.menu{border:1px solid #000; width:200px; display:block; padding:3px;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8"> 
    $(function(){ 
      var $element = $('span');    // The element or elements with the text to hide 
      var $limit = 26;    // The number of characters to show 
      var $str = $element.html();  // Getting the text 
      var $strtemp = $str.substr(0,$limit); // Get the visible part of the string 
      $str = $strtemp + ' ...<span class="hide">' + $str.substr($limit,$str.length) + '</span>'; // Recompose the string with the span tag wrapped around the hidden part of it 
      $element.html($str);    // Write the string to the DOM 
    }) 
</script> 

罗兰存有罗兰存有罗兰存有罗兰存有罗兰存有罗ren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum