スパン内でテキストを動的に短縮する機能

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> 

これが印刷されます。

ため、私は、テキストのより長い200pxのですので、スパンが複数200pxのサイズにリサイズされ、200pxのに「スパン幅」を設定しています。

javascriptまたはjQuery関数が必要なので、このようなものが表示されます。また、テキストの最後に "..."が追加されます。

CSSスタイルも...

Answer 1

を受け入れられるだろう、私はCSSプロパティtext-overflowは、あなたが探しているものだと思います。ブラウザのサポートは素晴らしいです。しかし、サポートされていない場所では、省略記号なしでテキストを切り取っても大丈夫ですか？

Answer 2

あなたは省略記号（...）を使用する必要がない場合は、クロスブラウザ純粋なCSSのアプローチがある：

あなたのコンテナを用いて固定し、 overflow CSSプロパティを設定設定し

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

ローレンイプサムイプサムローレンローレンローレンイプサムイプサムイプサムローレンロー....バディこれを試してみてくださいイプサム・ローレン・イプサム・ローレン・イプサム・ローレン・イプサム・ローレン・イプサム