制限文字列と項目を数えるが、私は例えばアイテムのリストである文字列を持っている

Question

を左：私は達成することができますどのように

-------------------------------- <- Div limit 
this is a test | test | +3 
-------------------------------- <- Div limit 

：私は何をしたいか

-------------------------------- <- Div limit 
this is a test | test | another string | abc | string test 
-------------------------------- <- Div limit 

はこのようなものですそんな感じ？可能だ？ テキストは動的です。divに収まる場合は、（1つのテキストと+5）またはすべてのテキストのみにすることができます。

Answer 1

固定された最大文字数を使用するのではなく、利用可能なすべての幅を使用する方が使いやすいでしょう。利用可能なすべての領域を使用するだけでなく、任意のフォントサイズまたはスタイルで動作するソリューションがあります。あなたはリストの項目にリンクや画像を置くことさえできます！

このテクニックは、リストをレンダリングし、DIVの右端を通過するエントリを削除します。

は、このHTMLを想定します。

<div id="theList" class="List" style="width:40ex"> 
    <span class="Entry">this is a test</span> 
    <span class="Divider">|</span> 
    <span class="Entry">test</span> 
    <span class="Divider">|</span> 
    <span class="Entry">another string</span> 
    <span class="Divider">|</span> 
    <span class="Entry">abc</span> 
    <span class="Divider">|</span> 
    <span class="Entry">string test</span> 
    <span class="Divider">|</span> <!-- Extra divider, for the count. --> 
    <span class="Count">0</span> <!-- The count. --> 
</div> 

上記の "幅：40exは" わずかになるこのDIVを強制することです。それを必要な幅に置き換える必要があります。

は、このCSSスタイルを想定します

// This uses jQuery. 
var listDiv = $("#theList"); 
var listWidth = listDiv.innerWidth(); 
var entries = listDiv.children(".Entry"); 
var firstLeft = entries.eq(0).offset().left; 
var countSpan = listDiv.children(".Count"); 
var nHidden = 0; 
var i; 
var entry; 
var needWidth; 
for (i = entries.length; 0 <= --i; /**/) { 
    entry = entries.eq(i); 
    if (nHidden != 0) { 
    countSpan.text("+" + nHidden); 
    needWidth = countSpan.offset().left + countSpan.outerWidth() 
    } else { 
    needWidth = entry.offset().left + entry.outerWidth(); 
    } 
    if (listWidth < needWidth) { 
    entry.css("display", "none"); 
    entry.next().css("display", "none"); 
    ++nHidden; 
    } else { 
    break; 
    } 
} 
if (nHidden == 0) { 
    countSpan.css("display", "none"); 
    countSpan.prev().css("display", "none"); 
} 

注：このコードは、空のリストを処理しないことがあり

.List { 
    overflow: hidden; 
    white-space: nowrap; 
    border: 1px dashed gray; /* Only for debugging. */ 
} 

.Entry { 
    padding-left: 0.5ex; 
    padding-right: 0.5ex; 
    background-color: LightGreen; /* Only for debugging. */ 
} 

.Count { 
    padding-left: 0.5ex; 
    padding-right: 0.5ex; 
    background-color: Orange; /* Only for debugging. */ 
} 

このJavaScriptコードを想定します。このコードは、最初のエントリでさえも長すぎる状況を処理しない場合があります。 私はこれらの問題を読者の練習問題として残しています。

Go see it on my JSFiddle! >>

Answer 2

var maxlength=20; 
var result=[]; 
var text="a | b | c dd d | ashBdhsjxbxjybxbxhxbxbxjbx"; 
//get the words 
var words=text.split(" | "); 
//loop trough 
for(i=0;i<words.length;i++){ 
//if word fits into content 
if(words[i].length<maxlength){ 
    //set maxlength to left space 
    maxlength -=words[i].length; 
    //add word to result 
    result.push(words[i]); 
}else{ 
    //add sth like " 3+" 
    result.push((words.length-i-1)+"+"); 
    //stop fetching words 
    break; 
} 
} 
//add the line again 
result=result.join(" | "); 

Answer 3

チェックこの小さなスニペット：次に

function some_function(qtt, text){ 
    var final_text = []; 
    var parts = text.split("|"); 
    for(i=0; i<qtt; i++){ 
     final_text.push(parts[i]); 
    } 

    final_text.push(" +" + (parts.length - qtt)); 

    return final_text.join("|"); 
} 

、この方法でそれを呼び出す：あなたは、以下の機能を使用することができます

var a = "this is a test | test | another string | abc | string test"; 

some_function(2, a); 
//this is a test | +4 

some_function(1, a); 
//this is a test | test | +3 

Answer 4

、私はjQueryのように定義プラグインなので、次のように書くことができます：

$('div').clipText('this is a test | test | another string | abc | string test', ' | '); 

さまざまなサイズのdiv要素を使用した作業デモがあります。このデモでは、文字列が異なる位置でどのようにクリップされるかを示しています。

$.fn.clipText = function(text, delim) { 
 
    return this.each(function() { 
 
     var parts = text.split(delim), 
 
      $this = $(this).text('X'), 
 
      height = $this.prop('scrollHeight'); 
 
     $this.text(text); 
 
     for (var i = 1; $this.prop('scrollHeight') > height && parts.length; i++) { 
 
      parts.pop(); 
 
      $this.text(parts.concat(i + '+').join(delim)); 
 
     } 
 
    }); 
 
} 
 

 
$(function() { 
 
    $('div').clipText('this is a test | test | another string | abc | string test', 
 
         ' | '); 
 
});

div { border: 1px solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:320px"></div> 
 
<div style="width:310px"></div> 
 
<div style="width:280px"></div> 
 
<div style="width:250px"></div> 
 
<div style="width:210px"></div> 
 
<div style="width:120px"></div> 
 
<div style="width:100px"></div>