54

"..."サイズ変更可能な要素内のテキストの途中に省略記号 ( ) を実装する必要があります。これがどのように見えるかです。そう、

"Lorem ipsum dolor sit amet. Ut ornare dignissim ligula sed commodo."

になる

"Lorem ipsum dolor sit amet ... commodo."

要素がテキストの幅に引き伸ばされると、省略記号が消えます。これはどのように行うことができますか？

4

16 に答える 16

27

この問題を解決する私の例を提案したいと思います。

主なアイデアは、テキストを 2 つの偶数部分 (または、長さが奇数の場合は最初の部分が大きい) に分割し、そのうちの 1 つは最後に省略記号を持ち、もう 1 つは右に揃えて配置することtext-overflow: clipです。

自動/ユニバーサルにしたい場合は、jsで行う必要があるのは、文字列を分割して属性を設定することだけです。

ただし、いくつかの欠点があります。

  1. 言葉や文字による素敵なラッピングはありません (text-overflow: ''現時点では FF でのみ機能します)
  2. 単語間で分割が発生した場合 - スペースは最初の部分にある必要があります。そうしないと、折りたたまれます。
  3. direction: rtl感嘆符は文字列の左側に移動されるため、文字列の末尾には感嘆符を付けないでください。::after単語の右側をタグに入れ、感嘆符を疑似要素に入れることでこれを修正できると思います。しかし、私はまだそれを適切に機能させていません。

しかし、これらすべてを使用すると、特にブラウザーの境界線をドラッグするときに、非常にクールに見えます。これは、jsfiddle ページで簡単に実行できます: https://jsfiddle.net/extempl/93ymy3oL/。または、以下の max-width を固定してスニペットを実行するだけです。

スポイラーの下のGif：

GIF

body {
  max-width: 400px;
}

span::before, span::after {
  display: inline-block;
  max-width: 50%;
  overflow: hidden;
  white-space: pre;
}

span::before {
  content: attr(data-content-start);
  text-overflow: ellipsis;
}

span::after {
  content: attr(data-content-end);
  text-overflow: '';
  direction: rtl;
}
<span data-content-start="Look deep into nature, and then you " 
      data-content-end=  "will understand everything better"></span>

<br>
<span data-content-start="https://www.google.com.ua/images/branding/g" 
      data-content-end=  "ooglelogo/2x/googlelogo_color_272x92dp.png"></span>

于 2016-04-07T08:15:27.257 に答える
10

そこで、私の同僚は余分な dom 要素を使用しない解決策を考え出しました。div がオーバーフローしているかどうかを確認し、最後の n 文字のデータ属性を追加します。残りはcssで行います。

ここにいくつかの HTML があります:

<div class="box">
    <div class="ellipsis" data-tail="some">This is my text it is awesome</div>
</div>
<div class="box">
    <div class="ellipsis">This is my text</div>
</div>

そしてCSS：

.box {
    width: 200px;
}

.ellipsis:before {
    float: right;
    content: attr(data-tail);
}

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

これは必須の jsfiddle です: http://jsfiddle.net/r96vB/1/

于 2014-06-05T00:04:15.517 に答える
7

次の Javascript 関数は、OS X のように中間の切り捨てを行います。

function smartTrim(string, maxLength) {
    if (!string) return string;
    if (maxLength < 1) return string;
    if (string.length <= maxLength) return string;
    if (maxLength == 1) return string.substring(0,1) + '...';

    var midpoint = Math.ceil(string.length / 2);
    var toremove = string.length - maxLength;
    var lstrip = Math.ceil(toremove/2);
    var rstrip = toremove - lstrip;
    return string.substring(0, midpoint-lstrip) + '...' 
    + string.substring(midpoint+rstrip);
}

途中の文字を省略記号に置き換えます。私のユニットテストは次のことを示しています：

var s = '1234567890';
assertEquals(smartTrim(s, -1), '1234567890');
assertEquals(smartTrim(s, 0), '1234567890');
assertEquals(smartTrim(s, 1), '1...');
assertEquals(smartTrim(s, 2), '1...0');
assertEquals(smartTrim(s, 3), '1...90');
assertEquals(smartTrim(s, 4), '12...90');
assertEquals(smartTrim(s, 5), '12...890');
assertEquals(smartTrim(s, 6), '123...890');
assertEquals(smartTrim(s, 7), '123...7890');
assertEquals(smartTrim(s, 8), '1234...7890');
assertEquals(smartTrim(s, 9), '1234...67890');
assertEquals(smartTrim(s, 10), '1234567890');
assertEquals(smartTrim(s, 11), '1234567890');
于 2009-05-06T20:31:07.927 に答える
4

これはゲームの後半かもしれませんが、私はこれに対する解決策を探していました.同僚が非常にエレガントな解決策を提案したので、それを共有します. いくつかの JS が必要ですが、それほど多くはありません。

divラベルを入れるのに必要なサイズがあると想像してください:

<div style="width: 200px; overflow: hidden"></div>

divこれで、ラベル付きの文字列と、それが収まるDOM 要素 ( this ) の 2 つのパラメーターを取る関数ができました。

function setEllipsisLabel(div, label)

最初に行うことはspan、このラベルで を作成し、それを に配置することdivです:

var span = document.createElement('span');
span.appendChild(document.createTextNode(label));
span.style.textOverflow = 'ellipsis';
span.style.display = 'inline-block';
div.appendChild(span);

プロパティを「省略記号」に設定text-overflowして、テキストが切り捨てられると、これを示すために最後に素敵な「...」が追加されるようにします。displayまた、これらの要素が後で操作できる実際のピクセル寸法を持つように、「インライン ブロック」に設定します。これまでのところ、純粋な CSS でできなかったことは何もありません。

しかし、省略記号を真ん中に置きたいのです。まず、それが必要かどうかを確認する必要があります...これは、と比較することで実行できますdiv.clientWidth-省略記号は、が よりも広いspan.clientWidth場合にのみ必要です。spandiv

省略記号が必要な場合は、単語の最後に固定数の文字を表示することから始めましょう。たとえば 10 文字です。したがって、ラベルの最後の 10 文字のみを含むスパンを作成し、それを分割:

var endSpan = document.createElement('span');
endSpan.style.display = 'inline-block';
endspan.appendChild(document.createTextNode(label.substring(label.length - 10)));
div.appendChild(endSpan);

次に、元の幅をオーバーライドしてspan、新しい幅に合わせましょう。

span.style.width = (div.clientWidth - endSpan.clientWidth) + 'px';

この結果、次のような DOM 構造ができました。

<div style="width: 200px; overflow: hidden">
   <span style="display: inline-block; text-overflow: ellipsis; width: 100px">
      A really long label is shown in this span
   </span>
   <span style="display: inline-block"> this span</span>
</div>

最初のスパンは「省略記号」に設定されているためspan、text-overflow最後に「...」が表示され、その後に 2 番目のスパンの 10 文字が続き、省略記号はdiv.

endSpan の 10 文字の長さをハードコーディングする必要もありません。これは、spanの初期幅と の比率を計算divし、ラベルの長さから適切な比率を引き、2 で割ることによって概算できます。

于 2012-05-18T20:12:59.077 に答える
3

フレックス ボックスについていくつか調査した結果、この純粋な CSS ソリューションを見つけました。これはかなりクールだと思います。

<div style="width:100%;border:1px solid green;display:inline-flex;flex-wrap:nowrap;">
   <div style="flex: 0 1 content;text-overflow: ellipsis;overflow:hidden;white-space:nowrap;"> Her comes very very very very very very very very very very very very very very very very very very very long </div>
   <div style="flex: 1 0 content;white-space:nowrap;"> &nbsp;but flexible line</div>
</div>
于 2016-06-09T09:51:59.447 に答える
0

別の刺し傷：

function truncate( str, max, sep ) {
    max = max || 10;
    var len = str.length;
    if(len > max){
        sep = sep || "...";
        var seplen = sep.length;
        if(seplen > max) { return str.substr(len - max) }

        var n = -0.5 * (max - len - seplen);
        var center = len/2;
        return str.substr(0, center - n) + sep + str.substr(len - center + n);
    }
    return str;
}

console.log( truncate("123456789abcde") ); // 123...bcde (using built-in defaults) 
console.log( truncate("123456789abcde", 8) ); // 12...cde (max of 8 characters) 
console.log( truncate("123456789abcde", 12, "_") ); // 12345_9abcde (customize the separator)
于 2015-06-03T07:32:15.080 に答える
0

middle、nearEnd、および End でトリミングできる関数を作成しましたが、サーバー側で最終的に必要になったため、まだテストされていません

//position acceptable values : middle, end, closeEnd
function AddElipsis(input, maxChars, position) {
    if (typeof input === 'undefined') {
        return "";
    }
    else if (input.length <= maxChars) {
        return input;
    }
    else {
        if (position == 'middle') {
            var midPos = Math.floor(maxChars / 2) - 2;
            return input.substr(0, midPos) + '...' + input.substr(input.length - midPos, input.length);
        }
        else if (position == 'closeEnd') {
            var firstPart = Math.floor(maxChars * 0.80) - 2;
            var endPart = Math.floor(maxChars * 0.20) - 2;
            return input.substr(0, firstPart) + '...' + input.substr(input.length - endPart, input.length);
        }
        else {
            return input.substr(0, maxChars - 3) + '...';
        }
    }
}
于 2014-10-30T08:36:10.363 に答える
0

これにより、省略記号とプレースホルダー テキストの位置をより細かく制御できます。

function ellipsis(str, maxLength, ellipsisLocationPercentage,placeholder) {
    /*
    ARGUMENTS:
    str - the string you want to maninpulate
    maxLength -  max number of characters allowed in return string
    ellipsisLocationPercentage (optional) - How far (percentage wise) into the return string you want the ellipses to be placed
        Examples:
        .85 : This is a very long string. This is a very long string. This is a very long string. This is a ver[...]very long string.
        .25 : This is a very long string. [...]g. This is a very long string. This is a very long string. This is a very long string.
    placeholder (optional) - this will be used to replace the removed substring. Suggestions : '...', '[..]', '[ ... ]', etc....
    */
    if(ellipsisLocationPercentage == null || isNaN(ellipsisLocationPercentage) || ellipsisLocationPercentage >= 1 || ellipsisLocationPercentage <= 0){
        //we've got null or bad data.. default to something fun, like 85% (that's fun, right??)
        ellipsisLocationPercentage = .85;
    }
    if(placeholder == null || placeholder ==""){
        placeholder = "[...]";
    }

    if (str.length > (maxLength-placeholder.length)) {
        //get the end of the string
        var beginning = str.substr(0, (maxLength - placeholder.length)*ellipsisLocationPercentage );
        var end = str.substr(str.length-(maxLength - placeholder.length) * (1-ellipsisLocationPercentage));
        return beginning + placeholder + end;
    }
    return str;
}

この関数は、次のように呼び出すことで呼び出すことができます。

ellipsis("This is a very long string. Be Scared!!!!", 8);//uses default values
ellipsis("This is a very long string. Be Scared!!!!", 8,.5);//puts ellipsis at half way point
ellipsis("This is a very long string. Be Scared!!!!", 8,.75,'<..>');//puts ellipsis at 75% of the way into the string and uses '<..>' as the placeholder
于 2015-08-26T18:40:10.857 に答える