功能在範圍內動態縮短文本

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