숨겨진 오버플로가있는 범위에서 점 (“…”)을 표시하려면 어떻게해야합니까?

내 CSS :

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

이제 컨텐츠 컨텐츠를 보여주고 있습니다

하지만 콘텐츠 콘텐츠 처럼 보여주고 싶습니다 ...

내용 뒤에 점을 표시해야합니다. 데이터베이스에서 컨텐츠가 동적으로 제공됩니다.

이를 위해 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

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));

나는 당신이 찾고있는 생각 text-overflow: ellipsis과 함께white-space: nowrap

자세한 내용은 여기를 참조 하십시오

이 시도,

.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();

글쎄, "text-overflow : ellipsis"는 나를 위해 일했지만 내 한계가 '너비'를 기반으로하는 것처럼 줄에 적용 할 수있는 솔루션이 필요했습니다 ( 'height'대신 'width'). 나는이 스크립트를했다 :

function listLimit (elm, line){
    var maxHeight = parseInt(elm.css('line-Height'))*line;

    while(elm.height() > maxHeight){
        var text = elm.text();
        elm.text(text.substring(0,text.length-10)).text(elm.text()+'...');
    }
}

그리고 예를 들어, h3에 2 줄만 있어야한다는 경우 :

$('h3').each(function(){
   listLimit ($(this), 2)
})

이것이 성능 요구에 대한 모범 사례인지 모르겠지만 나를 위해 일했습니다.

당신은 이것을 시도 할 수 있습니다 :

.classname{
    width:250px;
    overflow:hidden;
    text-overflow:ellipsis;
}

 var tooLong = document.getElementById("longText").value;
    if (tooLong.length() > 18){
        $('#longText').css('text-overflow', 'ellipsis');
    }

그의 답변에 대해 @sandeep에게 감사드립니다.

내 문제는 마우스 클릭으로 텍스트를 표시하거나 숨기고 싶다는 것입니다. 따라서 기본적으로 점이있는 짧은 텍스트가 표시되고 긴 텍스트를 클릭하면 나타납니다. 다시 클릭하면 긴 텍스트가 숨겨지고 짧은 텍스트가 다시 표시됩니다.

아주 쉬운 방법 : text-overflow : ellipsis로 클래스를 추가하거나 제거하십시오.

HTML :

<span class="spanShortText cursorPointer"  onclick="fInventoryShippingReceiving.ShowHideTextOnSpan(this);">Some really long description here</span>

CSS (.cursorPointer가 추가 된 @sandeep과 동일)

.spanShortText {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.cursorPointer {
  cursor: pointer;
}

jQuery 부분-기본적으로 cSpanShortText 클래스를 제거 / 추가합니다.

  function ShowHideTextOnSpan(element) {
    var cSpanShortText = 'spanShortText';
    var $el = $(element);
    if ($el.hasClass(cSpanShortText)) {
      $el.removeClass(cSpanShortText)
    } else {
      $el.addClass(cSpanShortText);
    }
  }