숨겨진 오버플로가 있는 스팬에서 점("...")을 표시하려면 어떻게 해야 합니까?

숨겨진 오버플로가 있는 스팬에서 점("...")을 표시하려면 어떻게 해야 합니까?

나의 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

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

text-overflow: ellipsis한 줄을 보여줘야만 작동합니다.더 많은 경우 사용 가능합니다.display: -webkit-box하나 이상의 선을 보여주고 싶을 경우의 속성.2줄에 대해 아래 코드를 입력합니다.

line-height: 1.6rem;
overflow: hidden;
display: -webkit-box; 
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 3.2rem;

이거 먹어봐요.

.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: elipsis"는 제게 효과적이었지만, 제 한계가 'width'에 기반했다면, 저는 ('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');
    }

ES6를 사용하는 경우, 3차 연산자 및 템플릿 리터럴로 만들 수 있습니다.

function add3Dots(text, limit)
{
    return text.length > limit ? `${text.substring(0, limit)}...` : text;
}

먼저 div tag set width를 만들고 그 안에 p tag를 만들고 거기에 텍스트를 추가하고 아래에 주어진 코드를 적용합니다.p 태그가 div 태그 "..."의 너비에 도달하면 적용됩니다.

-

리스트항목

`div > p{
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;}` 

그의 대답에 깊은 감사를 드립니다.

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

매우 쉬운 작업: 텍스트 오버플로가 있는 클래스를 추가/제거하기만 하면 됩니다. 생략합니다.

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 part - 기본적으로 클래스 cSpanShortText를 제거/추가합니다.

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

언급URL : https://stackoverflow.com/questions/11426275/how-can-i-show-dots-in-a-span-with-hidden-overflow