html - 隠しオーバーフローのあるスパンにドット ("...") を表示するにはどうすればよいですか?

Question

私のCSS：

#content_right_head span
{
  display:inline-block;
  width:180px;
  overflow:hidden !important;
}

現在、コンテンツのコンテンツが表示されています

しかし、私はコンテンツコンテンツのように表示したい ...

コンテンツの後にドットを表示する必要があります。コンテンツはデータベースから動的に取得されます。

Answer 1

これには、text-overflow: ellipsis;プロパティを使用できます。このように書く

span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>

JSFiddle

Answer 2

を使用している場合text-overflow:ellipsis、ブラウザはそのコンテナ内で可能な限りコンテンツを表示します。ただし、ドットの前の文字数を指定したり、一部のコンテンツを削除してドットを追加したりする場合は、以下の関数を使用できます。

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // you can also use substr instead of substring
    string = string.substring(0,limit) + dots;
  }
 
    return string;
}

のように呼ぶ

add3Dots("Hello World",9);

出力

Hello Wor...

実際の動作はこちら

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // you can also use substr instead of substring
    string = string.substring(0,limit) + dots;
  }

    return string;
}



console.log(add3Dots("Hello, how are you doing today?", 10));

Answer 3

text-overflow: ellipsisと組み合わせて探していると思います white-space: nowrap

詳細はこちら

Answer 4

これを試して、

.truncate {
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate要素にクラスを追加します。

---

編集、

上記の解決策は、すべてのブラウザーで機能するわけではありません。次の jQuery プラグインをクロス ブラウザ サポートで試すことができます。

(function ($) {
    $.fn.ellipsis = function () {
        return this.eachAsync({
            delay: 100,
            bulk: 0,
            loop: function (index) {
                var el = $(this);

                if (el.data("fullText") !== undefined) {
                    el.html(el.data("fullText"));
                } else {
                    el.data("fullText", el.html());
                }

                if (el.css("overflow") == "hidden") {
                    var text = el.html();
                    var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width('auto')
                                        .height(el.height())
                                        ;

                    el.after(t);

                    function width() { return t.width() > el.width(); };

                    var func = width;
                    while (text.length > 0 && width()) {
                        text = text.substr(0, text.length - text.length * 25 / 100);
                        t.html(text + "...");
                    }

                    el.html(t.html());
                    t.remove();
                }
            }
        });
    };
})(jQuery);

呼び方、

$("#content_right_head span").ellipsis();