এইচটিএমএল - উপবৃত্ত সক্রিয় হওয়ার সময় আমি কীভাবে কেবলমাত্র সরঞ্জামদণ্ডটি প্রদর্শন করতে পারি

Question

আমি ellipsisশৈলীতে আমার পৃষ্ঠায় গতিশীল ডেটা সহ একটি স্প্যান পেয়েছি ।

.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

আমি একই সামগ্রীর সাথে এই উপাদানটির সরঞ্জামদ্বারে যোগ করতে চাই, তবে আমি চাই এটি কেবল তখনই প্রদর্শিত হবে যখন সামগ্রী দীর্ঘ হবে এবং উপবৃত্তগুলি পর্দায় প্রদর্শিত হবে।

এটা করতে কোন উপায় আছে কি?
যখন ellipsisসক্রিয় হয় তখন ব্রাউজার কোনও ইভেন্ট ফেলে দেয় ?

* ব্রাউজার: ইন্টারনেট এক্সপ্লোরার

Comments

মনে রাখবেন যে text-overflow:ellipsis;: - ফায়ারফক্সে এ সব কাজ করে না জন্য আরো এই প্রশ্ন দেখতে পাবেন stackoverflow.com/questions/4927257/...

— Spudley

আমাকে ঠিক তেমন কিছু করতে হয়েছিল। এই উত্তরelement.offsetWidth < element.scrollWidth হিসাবে এখন পর্যন্ত কাজ করে বলে মনে হচ্ছে কিনা তা যাচাই করা হচ্ছে।

— মার্টিন স্মিথ

উপবৃত্ত সনাক্তকরণ: স্ট্যাকওভারফ্লো.com

— অ্যাড্রিয়েন

উত্তরোত্তর জন্য নোট: text-overflow:ellipsis;এখন ফায়ারফক্সে কাজ করে; এটি ফায়ারফক্স in এ যুক্ত হয়েছিল (সেপ্টেম্বর ২০১১ প্রকাশিত)

— স্লেসকে

Answer 1

এখানে অন্তর্নির্মিত উপবৃত্তাকার সেটিংস ব্যবহার করে এটি করার একটি উপায় রয়েছে এবং titleমার্টিন স্মিথের মন্তব্যে অন-ডিমান্ড (jQuery সহ) বিল্ডিং যুক্ত করেছে:

$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});

Comments

ধন্যবাদ, একটি মোহন মত কাজ করে! তবে আপনি যদি এটি আরও দক্ষ করে তুলতে চান তবে আপনি বাঁধন () অন () এর সাথে () এর সাথে প্রতিস্থাপনের বিষয়টি বিবেচনা করতে পারেন: $ (নথি) .অন ('মাউসেন্টার', '.মাইটওভারফ্লো', ফাংশন () {...});

— জিয়াদ

আপনি যদি এই টেক্সটটি স্বয়ংক্রিয়ভাবে সরিয়ে ফেলতে চান তবে পাঠ্যটি আর প্রবাহিত না হলে:: (নথি) .অন ('মাউসেন্টার', '.মাইটওভারফ্লো', ফাংশন () {var {t = $ (এটি); var শিরোনাম = $ t.attr ('শিরোনাম'); যদি (! শিরোনাম) {if (this.offsetWidth <this.scrolWidth) $ t.attr ('শিরোনাম', $ t.text ())} অন্য {যদি (this.offsetWidth> = this.scrolWidth && শিরোনাম ==। t.text ())। t.removeAttr ('শিরোনাম')}});

— ক্রিস জানসেন

মাউসেন্টার হল এমন ইভেন্ট যা আমরা বেঁধে রাখি বা শুনি। কেউ আসলে তাদের উপর মাউস না হওয়া পর্যন্ত আমাদের উপাদানগুলির টুলটিপটি যুক্ত করতে হবে না। সুতরাং আমরা যোগটি স্থগিত না করে DOM উপাদানগুলির যে কোনও একটিতে "পাওয়ারওভারফ্লো" শ্রেণীর সাথে মাউসেন্টারের সেই বিন্দু পর্যন্ত। জাস্ট-ইন-টাইম-টুলটিপস

— জেসন

"As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document"আরও তথ্যের জন্য দেখুন api.jquery.com/bind এবং api.jquery.com/on

— অ্যাড্রিয়েন

এটি আই 10 তে কাজ করে না - অফসেটউইথ স্ক্রোলউইথের সাথে সমান, উভয়ই আমাকে কাটা প্রশস্ততা দেয়।

— এসএসজিস্টি

Answer 2

এখানে একটি খাঁটি সিএসএস সমাধান রয়েছে। JQuery প্রয়োজন নেই। এটি কোনও সরঞ্জামদণ্ড প্রদর্শন করবে না, পরিবর্তে এটি কেবলমাত্র সামগ্রীটিকে মাউসওভারের সম্পূর্ণ দৈর্ঘ্যে প্রসারিত করবে।

যদি আপনার প্রতিস্থাপন হয়ে থাকে এমন সামগ্রী থাকে তবে দুর্দান্ত কাজ করে। তারপরে আপনাকে প্রতিবার jQuery ফাংশন চালাতে হবে না।

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

.might-overflow:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

Comments

এটি সরঞ্জামদণ্ডের মতো ভাল নয়, কারণ এটি বিন্যাসটি ভেঙে দিতে পারে।

— আলেকজান্ডার

টুলটিপসের সমস্যা হ'ল তারা মোবাইলে কমপক্ষে আপাতত কাজ করে না। এই উত্তরটি (পড়ুন: সম্ভবত) লেআউটটি ভেঙে দিতে পারে, তবে এটির সাথে মানিয়ে নেওয়া যেতে পারে, উদাহরণস্বরূপ, আটকানো উপাদানটির জন্য পৃথক পটভূমির রঙ থাকতে পারে। এটি এখনও মোবাইলে কাজ করবে না, তবে এটি ডেস্কটপের জন্য অন্য একটি বিকল্প।

— ট্রাইসিস

এই দুর্দান্ত উত্তরের জন্য ধন্যবাদ যা পুরোপুরি আমার প্রয়োজনীয়তাগুলিকে আবৃত করে। কিছু জাভাস্ক্রিপ্ট ব্যবহার করে আমরা কল্পনা করতে পারি যে ব্লকটি একেবারে অবস্থানযুক্ত করা যাতে এটি বিন্যাসটি না ভেঙে দেয়।

— নিয়াভলিস

এটি একটি দুর্দান্ত উত্তর, একটি CSS ইস্যুতে জাভাস্ক্রিপ্ট ব্লুটিংয়ের চেয়ে ভাল। স্পষ্টতই উপবৃত্তের একটি স্বয়ংক্রিয় শিরোনাম বিকল্প থাকতে হবে, এই মুহুর্তে এটি যেভাবে কার্যকর করা হয়েছে তার বোধের অভাব রয়েছে। খুব খারাপ সিএসএস কেবল এটির অনুমতি দেয় না: শেষ চরিত্রগুলি যদি '...' হয় তবে হোভার করুন

— জন

Answer 3

ইউসির উত্তর মৌলিকভাবে সঠিক, তবে আপনি সম্ভবত এটি মাউসন্টার ইভেন্টে করতে চান না। এটি হিসাব করার জন্য এটির প্রয়োজন হবে কিনা তা নির্ধারণ করতে এটি প্রয়োজন হয়, প্রতিটি সময় উপাদানটির উপর দিয়ে মাউস করে। যদি না উপাদানটির আকার পরিবর্তন হয়, এটি করার কোনও কারণ নেই।

উপাদানটি ডিওমে যুক্ত হওয়ার সাথে সাথে কেবল এই কোডটি কল করা ভাল হবে:

var $ele = $('#mightOverflow');
var ele = $ele.eq(0);
if (ele.offsetWidth < ele.scrollWidth)
    $ele.attr('title', $ele.text());

অথবা, ঠিক কখন এটি যুক্ত হয়েছে তা আপনি যদি জানেন না, তবে পৃষ্ঠাটি লোডিং শেষ হওয়ার পরে সেই কোডটি কল করুন।

আপনার যদি এমন একক উপাদানের সাথে আরও বেশি কিছু করার দরকার হয় তবে আপনি তাদের সমস্ত একই শ্রেণি দিতে পারেন (যেমন "পারদর্শী ওভারফ্লো") এবং সেগুলি আপডেট করার জন্য এই কোডটি ব্যবহার করুন:

$('.mightOverflow').each(function() {
    var $ele = $(this);
    if (this.offsetWidth < this.scrollWidth)
        $ele.attr('title', $ele.text());
});

Comments

+1, পৃষ্ঠা লোডে এটি করা সহজ বলে মনে হয় তবে আরও সম্ভাবনা সরবরাহ করে। অর্থাত। আপনি এই উপাদানটি স্টাইল করতে চাইতে পারেন যা সরঞ্জামদণ্ডটিকে "সংকেত" দেওয়ার জন্য বিন্দুযুক্ত আন্ডারলাইন সহ একটি সরঞ্জামদণ্ড রয়েছে। যেমন$(".mightOverflow").each(function() { if( $(this).offsetWidth < $(this).scrollWidth && !$(this).attr('title')){ $(this).attr('title', $(this).text()); $(this).css('border-bottom', '1px dotted #A8A8A8'); } });

— Adrien হউন

'প্রতিবার মাউস ওভার করার সময়' ভুল (এখন কমপক্ষে - উত্তরটি আপডেট হয়েছিল কিনা তা আমি জানি না) এটি পূর্বে গণনা করা হয়েছিল কিনা তা পরীক্ষা করে দেখে '&&! $ this.attr (' শিরোনাম ')'

— রুন জেপ্পেন

না, এটি কেবল আবার শিরোনামের বৈশিষ্ট্য যুক্ত করা থেকে রক্ষা করে। হিসাব তা নির্ধারণ করার জন্য প্রয়োজন এখনও সম্পন্ন করা হয়। this.offsetWidth < this.scrollWidthএবং সম্ভবত এমনকি চেকটি !$this.attr('title')প্রতিটি উপাদানটির উপর দিয়ে মাউস করার সময় সম্পাদন করা হবে।

— এলেজার

এই পদ্ধতির সমস্যাটি হ'ল সমস্ত উপাদান একবারে পরীক্ষা করা হয় (সম্ভাব্য পারফরম্যান্স প্রভাব) এবং এটি কেবল একবার গণনা করে, যাতে যদি ব্যবহারকারী ব্রাউজার সঙ্কুচিত করে জিনিসগুলি কাটা বা প্রসারিত করে, যদি সেগুলি আর কাটা না যায় তবে আপনি পারবেন না একটি সরঞ্জামদণ্ডের উপস্থিতি আপডেট করুন। আপনার কোডটি আবার উইন্ডো আকারে সংযুক্ত করার সাথে একটি পারফরম্যান্স সমস্যা হবে কারণ প্রতিটি আইটেম তার আকার পরীক্ষা করে। ইভেন্ট ডেলিগেশন "$ (ডকুমেন্ট)" .on ('মাউসেন্টার', '.মাইটওভারফ্লো', ... "ব্যবহার করে এবং উপাদানটি মাউসওয়ার হওয়া পর্যন্ত চেকটি বিলম্ব করে আপনি ফ্লাইতে আপডেট করতে পারেন এবং একবারে কেবলমাত্র 1 উপাদান পরীক্ষা করতে পারেন

— ক্রিস জানসেন

এটি আই 10 তে কাজ করে না - অফসেটউইথ স্ক্রোলউইথের সাথে সমান, উভয়ই আমাকে কাটা প্রশস্ততা দেয়।

— এসএসজিস্টি

Answer 4

এখানে আরও দুটি খাঁটি সিএসএস সমাধান রয়েছে:

1. কাটা টেক্সটটি জায়গায় দেখান:

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

.overflow:hover {
  overflow: visible;
}

.overflow:hover span {
  position: relative;
  background-color: white;

  box-shadow: 0 0 4px 0 black;
  border-radius: 1px;
}

<div>
  <span class="overflow" style="float: left; width: 50px">
    <span>Long text that might overflow.</span>
  </span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.
</div>

2. একটি নির্বিচারে "সরঞ্জামদণ্ড" দেখান :

.wrap {
  position: relative;
}

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

.overflow:after {
  content:"";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 15px;
  z-index: 1;
  border: 1px solid red; /* for visualization only */
  pointer-events:initial;

}

.overflow:hover:after{
  cursor: pointer;
}

.tooltip {
  /* visibility: hidden; */
  display: none;
  position: absolute;
  top: 10;
  left: 0;
  background-color: #fff;
  padding: 10px;
  -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.5s ease;
}


.overflow:hover + .tooltip {
  /*visibility: visible; */
  display: initial;
  transition: opacity 0.5s ease;
  opacity: 1;
}

<div>
  <span class="wrap">
    <span class="overflow" style="float: left; width: 50px">Long text that might overflow</span>
    <span class='tooltip'>Long text that might overflow.</span>
  </span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.
</div>

Comments

আমি ঠিক এটিই খুঁজছিলাম!

— প্রণীত নাদকর

দুর্দান্ত সমাধান, ঠিক আমার যা প্রয়োজন। ধন্যবাদ !

— আগু ভি

Answer 5

এখানে আমার jQuery প্লাগইন:

(function($) {
    'use strict';
    $.fn.tooltipOnOverflow = function() {
        $(this).on("mouseenter", function() {
            if (this.offsetWidth < this.scrollWidth) {
                $(this).attr('title', $(this).text());
            } else {
                $(this).removeAttr("title");
            }
        });
    };
})(jQuery);

ব্যবহার:

$("td, th").tooltipOnOverflow();

সম্পাদনা:

আমি এই প্লাগইনটির জন্য একটি টুকরো তৈরি করেছি। https://gist.github.com/UziTech/d45102cdffb1039d4415

Comments

এটি আই 10 তে কাজ করে না - অফসেটউইথ স্ক্রোলউইথের সাথে সমান, উভয়ই আমাকে কাটা প্রশস্ততা দেয়।

— এসএসজিস্টি

@ এসএসজকোস্টি আপনি আইই 10 তে পরীক্ষা করছেন কেন? এই মুহুর্তে আইই 10 ব্যবহার করার মতো কেউ নেই, যেহেতু যে কেউ আইই 10 ইনস্টল করতে পারে সে IE 11 ইনস্টল করতে পারে

— টনি ব্রিক্স

আহা ভাল আমাদের একটি কোম্পানির নীতি রয়েছে যা আমাদের ন্যূনতম আইই সংস্করণটি সমর্থন করে 10 Also এছাড়াও আমাদের ক্লায়েন্টদের অনেক কিছু (কিছু ব্যাংক এবং বিভিন্ন প্রতিষ্ঠান) এখনও আই 10 ব্যবহার করে। আচ্ছা ভালো.

— এসএসজিস্টি

Answer 6

এলিপসিসটি সত্যই প্রয়োগ করা হয়েছে কিনা তা সনাক্ত করতে হবে, তারপরে সম্পূর্ণ পাঠ্য প্রকাশের জন্য একটি সরঞ্জামদণ্ড প্রদর্শন করতে হবে। এটি কেবল তুলনা করেই যথেষ্ট নয় "this.offsetWidth < this.scrollWidthউপাদানটির প্রায়শই ধারণ করে থাকা উপাদানটিকে প্রায় " তবে প্রস্থে আরও একটি বা দুটি পিক্সেলের অভাব রয়েছে, বিশেষত পূর্ণ-প্রস্থ চীনা / জাপানি / কোরিয়ান অক্ষরের পাঠ্যের জন্য।

এখানে একটি উদাহরণ: http://jsfiddle.net/28r5D/5/

উপবৃত্ত সনাক্তকরণের উন্নতি করার একটি উপায় আমি পেয়েছি:

1. তুলনা করা "this.offsetWidth < this.scrollWidthপ্রথমে , ব্যর্থ হলে পদক্ষেপ # 2 চালিয়ে যান।
2. অস্থায়ীভাবে সিএসএস শৈলীতে {'ওভারফ্লো': 'দৃশ্যমান', 'সাদা-স্থান': 'সাধারণ', 'শব্দ-বিরতি': 'ব্রেক-অল' to এ স্যুইচ করুন}
3. ব্রাউজার রিলেআউট করতে দিন। যদি শব্দ-মোড়ানো ঘটে থাকে তবে উপাদানটি তার উচ্চতা প্রসারিত করবে যার অর্থ এলিপিসিসও প্রয়োজন।
4. CSS স্টাইল পুনরুদ্ধার করুন।

এখানে আমার উন্নতি: http://jsfiddle.net/28r5D/6/

Answer 7

আমি একটি jQuery প্লাগইন তৈরি করেছি যা ব্রাউজারের বিল্ট-ইন সরঞ্জামটিপটির পরিবর্তে বুটস্ট্র্যাপের টুলটিপ ব্যবহার করে। দয়া করে মনে রাখবেন এটি পুরানো ব্রাউজারের সাথে পরীক্ষা করা হয়নি।

জেএসফিডাল: https://jsfiddle.net/0bhsoavy/4/

$.fn.tooltipOnOverflow = function(options) {
    $(this).on("mouseenter", function() {
    if (this.offsetWidth < this.scrollWidth) {
        options = options || { placement: "auto"}
        options.title = $(this).text();
      $(this).tooltip(options);
      $(this).tooltip("show");
    } else {
      if ($(this).data("bs.tooltip")) {
        $tooltip.tooltip("hide");
        $tooltip.removeData("bs.tooltip");
      }
    }
  });
};

Comments

সহজ এবং উজ্জ্বল। ধন্যবাদ!

— গুমজেড

Answer 8

এটাই আমি করেছি। বেশিরভাগ টুলটিপ স্ক্রিপ্টগুলির জন্য আপনাকে একটি ফাংশন কার্যকর করতে হবে যা সরঞ্জামদ্বারগুলি সঞ্চয় করে। এটি একটি jQuery উদাহরণ:

$.when($('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
})).done(function(){ 
   setupTooltip();
});

আপনি যদি উপবৃত্ত সিএসএস পরীক্ষা করতে না চান, আপনি পছন্দ করতে পারেন:

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
})).done(function(){ 
   setupTooltip();
});

আমার চারপাশে "কখন" রয়েছে, যাতে সমস্ত শিরোনাম আপডেট না হওয়া পর্যন্ত "সেটআপটুলটিপ" ফাংশনটি কার্যকর না হয়। আপনার টুলটিপ ফাংশন এবং * যে উপাদানগুলি আপনি চেক করতে চান তার সাথে "সেটআপটুলটিপ" প্রতিস্থাপন করুন। * আপনি যদি এটিকে ছেড়ে দেন তবে তাদের সকলের মধ্য দিয়ে যাবেন।

আপনি যদি কেবল ব্রাউজারগুলির টুলটিপ দিয়ে শিরোনামের বৈশিষ্ট্যগুলি আপডেট করতে চান তবে আপনি এই জাতীয়করণ সহজ করতে পারেন:

$('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
});

বা উপবৃত্তির জন্য চেক ছাড়াই:

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
});

Comments

ডাউনটা কেন? আপনি যদি এমনটি করছেন তবে মন্তব্য করুন যাতে লোকেরা বুঝতে পারে যে সমস্যাটি কী। ধন্যবাদ।

— অনুরাগী

Answer 9

আপনি যদি কেবল জাভাস্ক্রিপ্ট ব্যবহার করে এটি করতে চান তবে আমি নিম্নলিখিতটি করব would স্প্যানটিকে একটি আইডি বৈশিষ্ট্য দিন (যাতে এটি সহজেই ডিওএম থেকে পুনরুদ্ধার করা যায়) এবং সমস্ত সামগ্রী 'বিষয়বস্তু' নামের একটি বৈশিষ্ট্যে রাখুন:

<span id='myDataId' style='text-overflow: ellipsis; overflow : hidden;
 white-space: nowrap; width: 71;' content='{$myData}'>${myData}</span>

তারপরে, আপনার জাভাস্ক্রিপ্টে, উপাদানটি ডিওমে প্রবেশের পরে আপনি নিম্নলিখিতটি করতে পারেন।

var elemInnerText, elemContent;
elemInnerText = document.getElementById("myDataId").innerText;
elemContent = document.getElementById("myDataId").getAttribute('content')
if(elemInnerText.length <= elemContent.length)
{
   document.getElementById("myDataId").setAttribute('title', elemContent); 
}

অবশ্যই, আপনি যদি ডওমে স্প্যানটি সন্নিবেশ করানোর জন্য জাভাস্ক্রিপ্ট ব্যবহার করছেন তবে সামগ্রীটি সন্নিবেশ করার আগে আপনি কেবল একটি পরিবর্তনশীলতে রাখতে পারেন। এইভাবে স্প্যানটিতে আপনার কোনও সামগ্রীর বৈশিষ্ট্যের প্রয়োজন নেই।

আপনি jQuery ব্যবহার করতে চাইলে এর চেয়ে আরও মার্জিত সমাধান রয়েছে।

Comments

খুশী হলাম। যেহেতু আমি এই পৃষ্ঠার অন্যান্য অংশে JQuery ব্যবহার করছি - JQuery মার্জিত সমাধান কি ??

— স্পাইডারম্যান

$("#myDataId").attr("title", function() { var innerText = $(this).text(); var content = $(this).attr("content"); if (innerText.length <= content.length) { return content; } return null; });

— মার্ক কোস্টেলো

খাঁটি জাভাস্ক্রিপ্ট দিয়ে আমি আপনার প্রথম পরামর্শটি চেষ্টা করেছিলাম - এটি কার্যকর হয় না। 'ইন্টার্নটেক্সট' বৈশিষ্ট্যটি সর্বদা পর্দায় পুরোপুরি প্রদর্শিত না হলেও এমনকি পাঠ্যের সম্পূর্ণ দৈর্ঘ্যটি সংরক্ষণ করে: mmInnerText.length == elemContent.length !!

— স্পাইডারম্যান

আপনার স্প্যানের স্টাইলটি প্রস্থের width১. স্ট্রিংয়ের প্রশস্ততা এর চেয়ে প্রস্থের চেয়ে বেশি কিনা তা যাচাই করবেন না কেন? আপনি যদি সত্যই মজার কিছু করতে চান, আপনি পাঠ্য-ওভারফ্লো ছাড়াই একটি লুকানো উপাদান যুক্ত করতে পারেন: উপবৃত্ত সেট এবং উভয়ের প্রস্থের তুলনা করতে পারেন। যদি লুকানোটি কোনও গোপন না করা থেকে বৃহত্তর হয় তবে দৃশ্যমানটির সাথে একটি শিরোনামের বৈশিষ্ট্য যুক্ত করুন।

— মার্ক কস্টেলো

Answer 10

আমার সিএসএস ক্লাস রয়েছে, যা নির্ধারণ করে কোথায় উপবৃত্ত স্থাপন করা যায়। তার উপর ভিত্তি করে, আমি নিম্নলিখিতগুলি করি (উপাদান সেট আলাদা হতে পারে, আমি সেগুলি লিখি, যেখানে উপবৃত্ত ব্যবহৃত হয়, অবশ্যই এটি পৃথক শ্রেণীর নির্বাচক হতে পারে):

$(document).on('mouseover', 'input, td, th', function() {
    if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
        $(this).attr('title', $(this).val());
    }
});

Comments

আমি আমার thisanchorthis.text()val()

— কেসটি

Answer 11

এখানে একটি ভ্যানিলা জাভাস্ক্রিপ্ট সমাধান:

(function init() {

  var cells = document.getElementsByClassName("cell");

  for(let index = 0; index < cells.length; ++index) {
    let cell = cells.item(index);
    cell.addEventListener('mouseenter', setTitleIfNecessary, false);
  }

  function setTitleIfNecessary() {
    if(this.offsetWidth < this.scrollWidth) {
      this.setAttribute('title', this.innerHTML);
    }
  }

})();

.cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px;
  border-style: solid;
  width: 120px; 
}

<div class="cell">hello world!</div>
<div class="cell">hello mars! kind regards, world</div>

Answer 12

এটি আমার সমাধান ছিল, কবজ হিসাবে কাজ করে!

    $(document).on('mouseover', 'input, span', function() {
      var needEllipsis = $(this).css('text-overflow') && (this.offsetWidth < this.scrollWidth);
      var hasNotTitleAttr = typeof $(this).attr('title') === 'undefined';
      if (needEllipsis === true) {
          if(hasNotTitleAttr === true){
            $(this).attr('title', $(this).val());
          }
      }
      if(needEllipsis === false && hasNotTitleAttr == false){
        $(this).removeAttr('title');
      }
  });

Comments

হাই @ ফারুকটি আপনার সমাধানটি আমার পক্ষে খুব ভাল কাজ করছে, আপনি এতই ধন্যবাদ জানাই। আমি জিজ্ঞাসা করতে চাই যে আমার কাছে দুটি এইচটিএমএল ট্যাগ অনুমান করে ইনপুট ও স্প্যান এবং আমি এই দুটি ট্যাগের অফসেটউইথ একই সাথে এই অফসেটউইথ ব্যবহার করে কিছু গাণিতিক গণনা করতে চাই want আমি যে কিভাবে করতে হবে?

— কুণাল তায়াগি

হাই কুনালটিয়াগী, আপনি এটিতে 2 টি পৃথক ফাংশন দিয়ে করতে পারেন, আমি কেবল ইনপুট এবং স্প্যান দিয়ে একটি লিখেছি কিন্তু আপনি এই ফাংশনটি 2 বার প্রতিলিপি করতে পারবেন, প্রথম ইনকামের সাথে প্রথম ফাংশনটি কেবল ইনপুট দিয়ে এবং দ্বিতীয় ফাংশনে কেবল স্প্যান করতে পারেন। এর মতো: $ (নথি) .অন ('মাউসওভার', 'ইনপুট', ফাংশন () {...}); এবং দ্বিতীয়টি $ (দস্তাবেজ) .অন ('মাউসওভার', 'স্প্যান', ফাংশন () {...});

— ফারুকটি

Answer 13

উপরের কোনও সমাধান আমার পক্ষে কাজ করে নি, তবে আমি একটি দুর্দান্ত সমাধান বের করেছিলাম। লোকেরা যে বৃহত্তম ভুলটি করছে তা হ'ল পাতা লোডের উপর উপাদানটিতে সমস্ত 3 সিএসএসের সম্পত্তি ঘোষণা করা। আপনাকে এই স্টাইলগুলি + টুলটিপটি গতিশীলভাবে যুক্ত করতে হবে এবং যদি আপনি কেবলমাত্র একটি উপবৃত্ত চান তার পিতামাতার চেয়ে প্রশস্ত।

    $('table').each(function(){
        var content = $(this).find('span').text();
        var span = $(this).find('span');
        var td = $(this).find('td');
        var styles = {
            'text-overflow':'ellipsis',
            'white-space':'nowrap',
            'overflow':'hidden',
            'display':'block',
            'width': 'auto'
        };
        if (span.width() > td.width()){
            span.css(styles)
                .tooltip({
                trigger: 'hover',
                html: true,
                title: content,
                placement: 'bottom'
            });
        }
    });

Answer 14

আপনি সম্ভবত স্প্যানটিকে অন্য স্প্যানের সাথে ঘিরে রাখতে পারেন, তবে কেবল প্রাথমিক / অভ্যন্তরের স্প্যানটির প্রস্থ নতুন / বাহ্যিক স্প্যানের চেয়ে বেশি কিনা তা পরীক্ষা করে দেখুন। নোট করুন যে আমি সম্ভবত বলেছি - এটি আমার অবস্থার উপর ভিত্তি করে যেখানে আমার কোনও spanঅভ্যন্তর ছিল tdতাই আমি আসলে জানি না যে এটি যদি কোনও spanঅভ্যন্তরের সাথে কাজ করে তবেspan ।

যদিও এখানে অন্যদের জন্য আমার কোড যাঁরা আমার মতো অবস্থানে থাকতে পারেন; আমি এটি কৌনিক প্রসঙ্গে থাকলেও আমি এটি পরিবর্তন না করে অনুলিপি / আটকানো করছি, আমি মনে করি না যে এটি পাঠযোগ্যতা এবং প্রয়োজনীয় ধারণা থেকে বিরত রয়েছে। আমি এটিকে পরিষেবা পদ্ধতি হিসাবে কোড করেছিলাম কারণ আমার এটি একাধিক জায়গায় প্রয়োগ করা দরকার। আমি যে নির্বাচকের মধ্যে দিয়ে যাচ্ছি সে একজন শ্রেণি নির্বাচক ছিল যা একাধিক উদাহরণের সাথে মিলবে।

CaseService.applyTooltip = function(selector) {
    angular.element(selector).on('mouseenter', function(){
        var td = $(this)
        var span = td.find('span');

        if (!span.attr('tooltip-computed')) {
            //compute just once
            span.attr('tooltip-computed','1');

            if (span.width() > td.width()){
                span.attr('data-toggle','tooltip');
                span.attr('data-placement','right');
                span.attr('title', span.html());
            }
        }
    });
}