লুকানো ওভারফ্লো সহ আমি কীভাবে বিন্দুগুলি ("...") দেখাব?

Question

আমার সিএসএস:

#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

Comments

আমি 'প্রস্থকে' সর্বোচ্চ-প্রস্থে পরিবর্তিত করার পরামর্শ দেব

— আমির মোগ

প্রতিক্রিয়াশীল লেআউট সম্পর্কে কী? আমার প্রস্থ স্থির নয়, সর্বোচ্চ-প্রস্থও নয়।

— জেপি_

অনক্লিক ব্যবহার করে কীভাবে এখন এইটিকে প্রসারিত করব?

— অঙ্কুশ

এটি আইই ১১ এবং ফায়ারফক্সে কাজ করে না। এর জন্য কোন দুর্দান্ত সমাধান?

— techie_questie

Answer 2

আপনি যদি টেক্সট-ওভারফ্লো: উপবৃত্ত ব্যবহার করছেন তবে ব্রাউজারটি সেই ধারকটির মধ্যে যা কিছু সম্ভব সম্ভব সামগ্রীগুলি প্রদর্শন করবে। তবে আপনি যদি বিন্দুগুলির আগে অক্ষরের সংখ্যা নির্দিষ্ট করতে চান বা কিছু বিষয়বস্তু ছড়িয়ে দিতে এবং বিন্দু যুক্ত করতে চান তবে আপনি নীচের ফাংশনটি ব্যবহার করতে পারেন।

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

Comments

widthসম্পত্তি হতে পারে 100%। আমি মনে করি এটি এর মতো আরও ভাল:.truncate { display:inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

— mahdi

Answer 5

ঠিক আছে, "পাঠ্য-ওভারফ্লো: উপবৃত্ত" আমার পক্ষে কাজ করেছে, তবে কেবল যদি আমার সীমাটি 'প্রস্থ' এর উপর ভিত্তি করে তৈরি করা হত তবে আমার একটি সমাধান দরকার যা রেখাগুলিতে প্রয়োগ করা যেতে পারে ('উচ্চতার পরিবর্তে' প্রস্থ ') সুতরাং আমি এই স্ক্রিপ্টটি করেছি:

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

এবং যখন আমি অবশ্যই করব, উদাহরণস্বরূপ, আমার এইচ 3 এর সাথে আমার কেবল 2 টি লাইন রয়েছে:

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

পারফরম্যান্সের প্রয়োজনগুলির জন্য এটি যদি সর্বোত্তম অনুশীলন হয় তবে আমার পক্ষে কাজ হয়েছিল।

Answer 6

আপনি এটি চেষ্টা করতে পারেন:

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

Answer 7

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

Answer 8

তার উত্তরের জন্য @ সন্দীপকে অনেক ধন্যবাদ।

আমার সমস্যাটি হ'ল আমি মাউস ক্লিকের সাহায্যে স্প্যানটিতে পাঠ্য / লুকিয়ে রাখতে চাই। সুতরাং বিন্দু সহ ডিফল্টরূপে সংক্ষিপ্ত পাঠ্য প্রদর্শিত হয় এবং ক্লিক করে দীর্ঘ পাঠ্য উপস্থিত হয়। আবার ক্লিক করা সেই দীর্ঘ পাঠ্যটিকে আড়াল করে এবং আবার একটি সংক্ষিপ্ত প্রদর্শন করে।

করণীয় সহজ কাজ: পাঠ্য-ওভারফ্লো সহ ক্লাস যুক্ত / সরান: উপবৃত্তাকার।

এইচটিএমএল:

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

সিএসএস (.সার্সপয়েন্টার যুক্ত সন্দ্বীপের সাথে একই)

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

.cursorPointer {
  cursor: pointer;
}

JQuery অংশ - মূলত স্রেফ সরিয়ে / ক্লাস সিএস্প্যানশোর্টেক্সট যুক্ত করে।

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