একটি নির্দিষ্ট প্রস্থ এবং উচ্চতার মধ্যে উপবৃত্তাকার সহ ক্রস ব্রাউজার মাল্টি-লাইন পাঠ্য ওভারফ্লো

178

আমি এই প্রশ্নটি আরও সহজ করে বোঝার জন্য একটি চিত্র তৈরি করেছি।

<div>একটি নির্দিষ্ট প্রস্থ এবং একাধিক লাইনের সাহায্যে একটি উপবৃত্ত তৈরি করা কি সম্ভব ?

পাঠ্য-ওভারফ্লো

আমি এখানে এবং সেখানে কিছু jQuery প্লাগইন চেষ্টা করেছি, কিন্তু আমি যা খুঁজছি তা খুঁজে পাচ্ছি না। কোন সুপারিশ? ধারনা?

javascript  jquery  html  css 
— এডওয়ার্ড
সূত্র
— StanleyH
1
এবং কেবলমাত্র সিএসএস-সমাধানের জন্য স্ট্যাকওভারফ্লো.com/ জিজ্ঞাসা / 3922739/…
— ইভ্জেনি
সম্পর্কিত নিবন্ধ css-tricks.com/line-clampin
— অ্যাড্রিয়েন
2
২০১ 2016 সালের মাঝামাঝি যে কেউ এটির জন্য সন্ধান করছেন তার জন্য সংক্ষিপ্ত উত্তরটি: এটি মার্জিত, ক্রস ব্রাউজার, সিএসএসের একমাত্র উপায়ে সম্ভব নয়। সমাধানটি প্রায়শই সম্পূর্ণ ( codepen.io/romanrudenko/pen/ymHFh ) হিসাবে প্রদত্ত সমাধানটি এতটাই গোল্ডবার্জিয়ান যা আপনার সমস্ত শরীরকে আঘাত করে এবং এখনও বেশ কুৎসিত করে।
— কনরাড

উত্তর:

91

শুধু একটি দ্রুত প্রাথমিক ধারণা।

আমি নিম্নলিখিত মার্কআপ দিয়ে পরীক্ষা করছিলাম: 

<div id="fos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>  
</div>

এবং সিএসএস:

#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }

এই jQuery প্রয়োগ করা পছন্দসই ফলাফল অর্জন করবে:

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

এটি বারবার পাঠ্যের শেষ শব্দটি পছন্দসই আকারে না পৌঁছানোর চেষ্টা করে। উপচে পড়া কারণ: লুকানো; প্রক্রিয়াটি অদৃশ্য থেকে যায় এবং জেএস বন্ধ করে দেওয়ার পরেও ফলাফলটি 'দৃশ্যমানভাবে সঠিক' থাকে (অবশ্যই "..." ছাড়াই)।

যদি আপনি এটি সার্ভার-সাইডে একটি বুদ্ধিমান কাটছাঁটির সাথে একত্রিত করেন (এটি কেবল একটি ছোট ওভারহেড ছেড়ে দেয়) তবে এটি আরও দ্রুত চালিত হবে :)।

আবার, এটি একটি সম্পূর্ণ সমাধান নয়, কেবল একটি ধারণা।

আপডেট: একটি জেএসফিডাল ডেমো যুক্ত করা হয়েছে ।

— কাপা
সূত্র
1
দুর্দান্ত সমাধান @ বাজেমেগাকাপা ... তবে আমার কিছু সমস্যা এটি আমার ক্ষেত্রে খাপ খাইয়ে দেওয়ার চেষ্টা করছে। আমার liপ্রত্যেকের বিভিন্ন এবং অভ্যন্তরে রয়েছে একটি .blockএবং একটি .block h2এবং এটিকে আমার h2ভিতরে প্রয়োগ করা দরকার .blockতবে আমি এটি কাজ করতে পারি না। একের অধিক থাকলে কী কোনও ডিফেরেন্ট হয় .block h2?
— অ্যালেক্স
1
আমার ক্ষেত্রে এটি পাঠ্যটির মাত্র 2 টি লাইন রেখেছিল যখন 3 হওয়া উচিত ছিল স্পষ্টতই আমার ধারকটি height*3কয়েক পিক্সেলের লাইনের চেয়ে ছোট ছিল । সহজ ফিক্সটি হ'ল কেবল কয়েক পিক্সেল যুক্ত করাdivh
— লুকাশ এলটি
3
এই স্ক্রিপ্টটির সাথে আমার অসীম লুপটির খারাপ অভিজ্ঞতা হয়েছিল কারণ পাঠ্যটিতে কেবলমাত্র একটি খুব দীর্ঘ শব্দ রয়েছে, তাই প্রতিস্থাপনের রেজিএক্সপ্যাকের সাথে কোনও মিল নেই। এটি এড়াতে, whileলাইনের ঠিক পরে এই কোডটি যুক্ত করুন :if(!$p.text().match(/\W*\s(\S)*$/)) break;
— ক্রিসওয়েবদেভ
1
এই ক্ষেত্রে সমস্যা হওয়ার সম্ভাবনা না থাকলেও, ডিওএম আপডেট করা এবং বারবার লেআউটটি পরীক্ষা করা একটি খারাপ ধারণা, কারণ এটি ধীর হয়ে যেতে পারে। এটি হ্রাস করার জন্য, আপনি বাইনারি অনুসন্ধানের অনুরূপ কিছু করতে পারেন: পাঠ্য ব্লকটি ইতিমধ্যে ফিট রয়েছে কিনা তা পরীক্ষা করুন, অন্যথায় পাঠ্যটিকে শব্দ বা অক্ষরে ভাগ করুন এবং আপনার সীমানা সংজ্ঞায়িত করুন (নিম্ন = 1 শব্দ / অক্ষর, উপরের = সমস্ত শব্দ / অক্ষর) , while ((upper-lower)>1) {let middle=((lower+upper)/2)|0 /*|0 is quick floor*/; if (test(words.slice(0,middle)+'...')) {lower=middle;} else {upper=middle;}}। @ ক্রিস ওয়েবেডেভ যেমন খুঁজে পেয়েছে, আপনি একটি বিশাল শব্দও পরীক্ষা করতে চাইবেন।
— চিনটো ভোক্রো
1
এই সমাধান দুর্দান্ত। আমার ক্ষেত্রে, আমাকে মূল পাঠ্যের উপর নজর রাখা দরকার যাতে আমি পূর্ণ পাঠ্যের মানটি প্রতিক্রিয়া অনুসারে ছাঁটাই করতে পারি। সুতরাং পৃষ্ঠাটি লোড হওয়ার পরে, আমি মূল পাঠ্যটি একটি ভেরিয়েবলে সংরক্ষণ করি এবং এই যুক্তিটি চালানোর আগে আমি মূল পাঠ্যের মানটি দিয়ে উপাদানটিকে 'রিফ্রেশ' করতে নিশ্চিত করি। অভিযোজন যোগ করুন, এবং এটি আশ্চর্যজনকভাবে কাজ করে।
— 18-23
68

ব্যবহার করে দেখুন jQuery.dotdotdot প্লাগইন।

$(".ellipsis").dotdotdot();
— ঔজ্বল্যহীন
সূত্র
11
আপনি কিভাবে এটি উচ্চারণ করবেন? ডট ডট ডট ডট?
— জ্যাকএস
58
সত্যিই সিএসএসের মাধ্যমে সমাধান করা উচিত এমন একটি সমস্যা সমাধান করতে> 600 লাইন জেএস ব্যবহার করতে ব্যর্থ হয়েছে
— জেথ্রো লারসন
আমি এটি চেষ্টা করেছি, এবং এটি ঠিকঠাক কাজ করছে। স্বীকৃত উত্তর হওয়া উচিত
— আবদেলহাদি
1
ফন্ট এবং অন্যান্য বাহ্যিক সংস্থানগুলি আপনার এইচটিএমএলের লেআউটকে প্রভাবিত করতে পারে বলে উইন্ডো.লোড হওয়া ইভেন্ট এবং $ (নথি) .ডিডি () ব্যবহার না করে তা নিশ্চিত করুন। থসগুলির সংস্থানগুলি লোড হওয়ার আগে যদি ডটডটট এক্সটেক্ট করে তবে সঠিক অবস্থানটিতে পাঠ্য কেটে দেওয়া হবে না।
— sboisse
10
এটি একটি বাণিজ্যিক সরঞ্জাম, এটি একটি একক সাইটের জন্য 5 ডলার এবং একাধিক সাইটের জন্য 35 ডলার। লাইসেন্সিং একটি ব্যথা হবে। আমি ভেবেছিলাম এটি নিখরচায় এবং তাত্ক্ষণিকভাবে সংহতযোগ্য, তাই না!
— জিন খ।
29

"লাইন ক্ল্যাম্পিং" এর জন্য জাভাস্ক্রিপ্ট লাইব্রেরি

নোট করুন যে "লাইন ক্ল্যাম্পিং" কে "মাল্টি-লাইনের ব্লকের এলিপিসিস" বা "উল্লম্ব উপবৃত্ত" হিসাবেও অভিহিত করা হয়।

github.com/BeSite/jQuery.dotdotdot

github.com/josephschmitt/Clamp.js

এখানে আরো কয়েকটি আমি এখনও তদন্ত করিনি:

লাইন ক্ল্যাম্পিংয়ের জন্য সিএসএস সমাধান

কিছু সিএসএস সমাধান রয়েছে তবে সহজ ব্যবহারগুলির মধ্যে -webkit-line-clampব্রাউজারের দুর্বল সমর্থন রয়েছে । Jsfiddle.net/AdrienBe/jthu55v7/ এ লাইভ ডেমো দেখুন

কেবল সিএসএস ব্যবহার করে এটি ঘটানোর জন্য বহু লোক প্রচুর প্রচেষ্টায় গিয়েছিলেন। এটি সম্পর্কে নিবন্ধ এবং প্রশ্নগুলি দেখুন:

আমি কি সুপারিশ করব

সহজবোধ্য রাখো. এই বৈশিষ্ট্যটি উত্সর্গ করার জন্য আপনার কাছে প্রচুর সময় না থাকলে সহজতম ও পরীক্ষিত সমাধানের জন্য যান: সাধারণ সিএসএস বা একটি ভাল পরীক্ষিত জাভাস্ক্রিপ্ট লাইব্রেরি।

অভিনব / জটিল / অত্যন্ত স্বনির্ধারিত কোনও কিছুর জন্য যান এবং আপনি রাস্তার নিচে এর জন্য মূল্য দিতে হবে।

অন্যরা কী করে

এয়ারবিএনবির মতো ফেইড আউট করা ভাল সমাধান হতে পারে। এটি সম্ভবত বেসিক সিএসএসের সাথে বুনিয়াদি jQuery রয়েছে। আসলে, এটি সিএসএসট্রিক্সের সমাধানের সাথে খুব মিল বলে মনে হচ্ছে

এয়ারবিএনবি "আরও পড়ুন" সমাধান

ওহ, এবং যদি আপনি নকশা অনুপ্রেরণার সন্ধান করেন:

  • smashingmagazine.com/2009/07/designing-read-more-and-continue-reading-links/ , ২০০৯ থেকে যদিও ...
  • ড্রিবলের সম্ভবত আকর্ষণীয় ডিজাইন রয়েছে ... আমি তাদের সংগ্রহ করার কোনও উপায় খুঁজে পাইনি (অনুসন্ধান বা ট্যাগের মাধ্যমে), কোনও প্রাসঙ্গিক লিঙ্ক ভাগ করে নিতে নির্দ্বিধায়
— অ্যাড্রিন বি
সূত্র
6

এইচটিএমএলে এমন কোনও বৈশিষ্ট্য নেই এবং এটি অত্যন্ত হতাশাব্যঞ্জক।

এটি মোকাবেলায় আমি একটি গ্রন্থাগার তৈরি করেছি ।

  • একাধিক পাঠ্য-ওভারফ্লো: উপবৃত্তাকার
  • প্রযুক্তিগুলির সাথে একাধিক পাঠ্য যা এটি সমর্থন করে না: উদাহরণস্বরূপ এসভিজি, ক্যানভাস
  • আপনার এসভিজি পাঠ্যে, আপনার HTML উপস্থাপনায় এবং উদাহরণস্বরূপ আপনার পিডিএফ রফতানীতে ঠিক একই লাইন ব্রেক রয়েছে

স্ক্রিনশট, টিউটোরিয়াল এবং ডাবলোড লিংকের জন্য আমার সাইটটি দেখুন ।

— স্যামুয়েল রসিল
সূত্র
"ডিবি সংযোগ স্থাপনে ত্রুটি" ... আপনি অন্য সবার মতো করতে এবং আপনার প্রকল্পটি গিথুবটিতে হোস্ট করতে চাইতে পারেন, এটি সম্ভবত আপনার পক্ষে এবং সম্প্রদায়ের পক্ষে ভাল লাগবে :)
— অ্যাড্রিয়েন
@ অ্যাড্রিয়েন এটি গিথুবে রয়েছে: github.com/rossille/jstext , এবং আপনি ঠিক বলেছেন , গিথুব আমার ওয়েবসাইটের তুলনায় আরও স্থিতিশীল, আমি
— গিথুব পৃষ্ঠাকে
সামুয়েলরোসিল দুর্দান্ত সংবাদ, দ্রুত আপডেটের জন্য ধন্যবাদ!
— অ্যাড্রিন
4

বামেগাকাপার সমাধানের উপর ভিত্তি করে খাঁটি জেএস সমাধান এবং উপাদানগুলির রেখার চেয়ে কম উচ্চতা / সর্বাধিক উচ্চতা দেওয়ার চেষ্টা করে এমন লোকদের জবাবদিহিতা করতে কিছু সাফাই

  var truncationEl = document.getElementById('truncation-test');
  function calculateTruncation(el) {
    var text;
    while(el.clientHeight < el.scrollHeight) {
      text = el.innerHTML.trim();
      if(text.split(' ').length <= 1) {
        break;
      }
      el.innerHTML = text.replace(/\W*\s(\S)*$/, '...');
    }
  }

  calculateTruncation(truncationEl);
— prashn64
সূত্র
এটি অত্যন্ত অপ্রয়োজনীয় কোড। "যখন" চেহারাটি ব্যবহার করে অসীম লুপ সহ সম্ভাব্য বাগ g
— ওয়েববরথ
4

আমার একটি সমাধান রয়েছে যা ভালভাবে কাজ করে তবে পরিবর্তে একটি উপবৃত্ত এটি গ্রেডিয়েন্ট ব্যবহার করে। সুবিধাগুলি হ'ল আপনাকে কোনও জাভাস্ক্রিপ্ট গণনা করতে হবে না এবং এটি টেবিলের ঘরগুলি সহ চলক প্রস্থের পাত্রে কাজ করে। এটি বেশ কয়েকটি অতিরিক্ত ডিভ ব্যবহার করে তবে এটি কার্যকর করা খুব সহজ।

http://salzerdesign.com/blog/?p=453

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

— মরিয়ম সালজার
সূত্র
আপনার সমাধানের গুরুত্বপূর্ণ অংশগুলি দয়া করে এসও লিঙ্কে ভাগ করুন, কেবলমাত্র উত্তরগুলির অনুমতি নেই।
— কাপা 26'13
এর উজ্জ্বল দিকটি হ'ল পাঠটি নিজেই কাটা হয়নি, সুতরাং ব্যবহারকারী যদি টেবিলটি অনুলিপি-পেস্ট করেন তবে পুরো সামগ্রীটি উপস্থিত হবে।
— প্রোটোটাইপ
খুব সুন্দর একটি ধারণা। এটি এই নিবন্ধেও
— Adrien
4

এটি সম্পাদন করার জন্য এখানে খাঁটি সিএসএস উপায় রয়েছে: http://www.mobify.com/blog/m Multilineline-ellipsis-in-pure-css /

এখানে একটি সংক্ষিপ্তসার দেওয়া হল:

এখানে চিত্র বর্ণনা লিখুন

<html>
<head>
<style>
    html, body, p { margin: 0; padding: 0; font-family: sans-serif;}

    .ellipsis {
        overflow: hidden;
        height: 200px;
        line-height: 25px;
        margin: 20px;
        border: 5px solid #AAA; }

    .ellipsis:before {
        content:"";
        float: left;
        width: 5px; height: 200px; }

    .ellipsis > *:first-child {
        float: right;
        width: 100%;
        margin-left: -5px; }        

    .ellipsis:after {
        content: "\02026";  

        box-sizing: content-box;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;

        float: right; position: relative;
        top: -25px; left: 100%; 
        width: 3em; margin-left: -3em;
        padding-right: 5px;

        text-align: right;

        background: -webkit-gradient(linear, left top, right top,
            from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
        background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
        background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }
</style>
</head>
<body>
    <div class="ellipsis">
        <div>
            <p>Call me Ishmael.....</p> 
        </div>
    </div>
</body>
</html>
— হারুন হফম্যান
সূত্র
4

আপনি -webkit-line-clampসম্পত্তি ব্যবহার করতে পারেন div।

-webkit-line-clamp: <integer>যার অর্থ সামগ্রীটি কেটে ফেলার আগে সর্বাধিক সংখ্যক রেখা নির্ধারণ করুন এবং তারপরে (…)শেষ লাইনের শেষে একটি উপবৃত্ত প্রদর্শিত হবে ।

div {
  width: 205px;
  height: 40px;
  background-color: gainsboro;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  
  /* <integer> values */
  -webkit-line-clamp: 2;
}
<div>This is a multi-lines text block, some lines inside the div, while some outside</div>
স্নিপেট প্রসারিত করুন

— পেনি লিউ
সূত্র
2
কেউ কেন এই উত্তরটিকে হ্রাস করেছে তা নিশ্চিত নয়। 2020 সালের মার্চ হিসাবে ব্রাউজার সমর্থনটি বেশ শালীন - 95% caniuse.com/#search=line-clamp
— ইউলিয়ান
2

এখানে একটি ভ্যানিলা জাভাস্ক্রিপ্ট সমাধান যা আপনি একটি চিমটি ব্যবহার করতে পারেন:

// @param 1 = element containing text to truncate
// @param 2 = the maximum number of lines to show
function limitLines(el, nLines) {
  var nHeight,
    el2 = el.cloneNode(true);
  // Create clone to determine line height
  el2.style.position = 'absolute';
  el2.style.top = '0';
  el2.style.width = '10%';
  el2.style.overflow = 'hidden';
  el2.style.visibility = 'hidden';
  el2.style.whiteSpace = 'nowrap';
  el.parentNode.appendChild(el2);
  nHeight = (el2.clientHeight+2)*nLines; // Add 2 pixels of slack
  // Clean up
  el.parentNode.removeChild(el2);
  el2 = null;
  // Truncate until desired nLines reached
  if (el.clientHeight > nHeight) {
    var i = 0,
      imax = nLines * 35;
    while (el.clientHeight > nHeight) {
      el.innerHTML = el.textContent.slice(0, -2) + '&hellip;';
      ++i;
      // Prevent infinite loop in "print" media query caused by
      // Bootstrap 3 CSS: a[href]:after { content:" (" attr(href) ")"; }
      if (i===imax) break;
    }
  }
}

limitLines(document.getElementById('target'), 7);
#test {
  width: 320px;
  font-size: 18px;
}
<div id="test">
  <p>Paragraph 1</p>
  <p id="target">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Paragraph 3</p>
</div>
স্নিপেট প্রসারিত করুন

আপনি নীচের কোডপেনে এটির সাথে চারপাশে খেলতে পারেন। সিএসএস প্যানেলে ফন্টের আকার পরিবর্তন করার চেষ্টা করুন এবং ফলাফল আপডেট করার জন্য এইচটিএমএল প্যানেলে একটি ছোটখাট সম্পাদনা করুন (উদাহরণস্বরূপ, কোথাও একটি অতিরিক্ত স্থান যুক্ত করুন)। হরফ আকার নির্বিশেষে, মাঝারি অনুচ্ছেদটি সর্বদা দ্বিতীয় প্যারামিটারের লাইন সংখ্যা সীমিতলাইনগুলিতে () কে কাটা উচিত।

কোডপেন: http://codepen.io/thdoan/pen/BoXbEK

— thdoan
সূত্র
2

সম্পাদনা: শেভ জুড়ে এসেছিল যা জেএস প্লাগইন যা কোনও প্রদত্ত সর্বোচ্চ উচ্চতার উপর ভিত্তি করে মাল্টি লাইন পাঠ্য কাটা কাটা করে। এটি সর্বোত্তম ব্রেক পয়েন্টটি খুঁজতে বাইনারি অনুসন্ধান ব্যবহার করে। অবশ্যই তদন্ত মূল্য।

মূল উত্তর:

এই সমস্যার জন্য আমাকে ভ্যানিলা জেএস সমাধান নিয়ে আসতে হয়েছিল। আমি যে ক্ষেত্রে কাজ করেছি সে ক্ষেত্রে আমাকে দীর্ঘ পণ্যের নাম সীমিত প্রস্থে এবং দুই লাইনের উপরে ফিট করতে হয়েছিল; প্রয়োজনে উপবৃত্ত দ্বারা কেটে নেওয়া।

আমি আমার প্রয়োজন অনুসারে এমন কিছু রান্না করতে বিভিন্ন এসও পোস্টের উত্তরগুলি ব্যবহার করেছি। কৌশলটি নিম্নরূপ:

  1. পছন্দসই ফন্টের আকারের জন্য ফন্টের বৈকল্পিকের গড় অক্ষরের প্রস্থ গণনা করুন।
  2. ধারকটির প্রস্থ গণনা করুন
  3. ধারকটির এক লাইনে ফিট হওয়া অক্ষরের সংখ্যা গণনা করুন
  4. একটি রেখায় মানানসই অক্ষরের সংখ্যা এবং পাঠ্যটি মোড়ানোর জন্য যে লাইনের সংখ্যা রয়েছে তার উপর ভিত্তি করে স্ট্রিংটি কাটাতে অক্ষরের সংখ্যা গণনা করুন।
  5. পূর্ববর্তী গণনার উপর ভিত্তি করে ইনপুট পাঠ্য কেটে ফেলুন (উপবৃত্ত দ্বারা যুক্ত অতিরিক্ত অক্ষরের জন্য ফ্যাক্টরিং) এবং শেষে "..." যুক্ত করুন

কোড নমুনা:

/**
 * Helper to get the average width of a character in px
 * NOTE: Ensure this is used only AFTER font files are loaded (after page load)
 * @param {DOM element} parentElement 
 * @param {string} fontSize 
 */
function getAverageCharacterWidth(parentElement, fontSize) {
    var textSample = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()";
    parentElement = parentElement || document.body;
    fontSize = fontSize || "1rem";
    var div = document.createElement('div');
    div.style.width = "auto";
    div.style.height = "auto";
    div.style.fontSize = fontSize;
    div.style.whiteSpace = "nowrap";
    div.style.position = "absolute";
    div.innerHTML = textSample;
    parentElement.appendChild(div);

    var pixels = Math.ceil((div.clientWidth + 1) / textSample.length);
    parentElement.removeChild(div);
    return pixels;
}

/**
 * Helper to truncate text to fit into a given width over a specified number of lines
 * @param {string} text Text to truncate
 * @param {string} oneChar Average width of one character in px
 * @param {number} pxWidth Width of the container (adjusted for padding)
 * @param {number} lineCount Number of lines to span over
 * @param {number} pad Adjust this to ensure optimum fit in containers. Use a negative value to Increase length of truncation, positive values to decrease it.
 */
function truncateTextForDisplay(text, oneChar, pxWidth, lineCount, pad) {
    var ellipsisPadding = isNaN(pad) ? 0 : pad;
    var charsPerLine = Math.floor(pxWidth / oneChar);
    var allowedCount = (charsPerLine * (lineCount)) - ellipsisPadding;
    return text.substr(0, allowedCount) + "...";
}


//SAMPLE USAGE:
var rawContainer = document.getElementById("raw");
var clipContainer1 = document.getElementById("clip-container-1");
var clipContainer2 = document.getElementById("clip-container-2");

//Get the text to be truncated
var text=rawContainer.innerHTML;

//Find the average width of a character
//Note: Ideally, call getAverageCharacterWidth only once and reuse the value for the same font and font size as this is an expensive DOM operation
var oneChar = getAverageCharacterWidth();

//Get the container width
var pxWidth = clipContainer1.clientWidth;

//Number of lines to span over
var lineCount = 2;

//Truncate without padding
clipContainer1.innerHTML = truncateTextForDisplay(text, oneChar, pxWidth, lineCount);

//Truncate with negative padding value to adjust for particular font and font size
clipContainer2.innerHTML = truncateTextForDisplay(text, oneChar, pxWidth, lineCount,-10);
.container{
  display: inline-block;
  width: 200px;
  overflow: hidden;
  height: auto;
  border: 1px dotted black;
  padding: 10px;
  }
<h4>Untruncated</h4>
<div id="raw" class="container">
This is super long text which needs to be clipped to the correct length with ellipsis spanning over two lines
</div>
<h4>Truncated</h4>
<div id="clip-container-1" class="container">
</div>
<h4>Truncated with Padding Tweak</h4>
<div id="clip-container-2" class="container">
</div>
স্নিপেট প্রসারিত করুন

পুনশ্চ:

  1. যদি কাটাটি কেবল একটি লাইনে থাকে তবে পাঠ্য-ওভারফ্লো ব্যবহারের খাঁটি সিএসএস পদ্ধতি: উপবৃত্তটি আরও কম
  2. যে ফন্টগুলির নির্দিষ্ট প্রস্থ থাকে না তার ফলে খুব শীঘ্রই বা খুব দেরি হয়ে যায় (বিভিন্ন চরিত্রের আলাদা প্রস্থ থাকে বলে)। প্যাড প্যারামিটার ব্যবহার কিছু ক্ষেত্রে এটি হ্রাস করতে সহায়তা করে তবে বোকা প্রমাণ হবে না :)
  3. আমি ল্যাপটপ ফিরে আসার পরে মূল পোস্টগুলিতে লিঙ্ক এবং রেফারেন্স যুক্ত করব (ইতিহাসের প্রয়োজন)

পিপিএস: ঠিক বুঝতে পেরেছি এটি @ ড্যানম্যান এবং @ স্টেনএভারের প্রস্তাবিত পদ্ধতির সাথে খুব মিল। একটি বাস্তবায়নের উদাহরণের জন্য কোড স্নিপেটগুলি চেকআউট করুন।

— চিরাগ রবীন্দ্র
সূত্র
2

খুব সহজ জাভাস্ক্রিপ্ট সমাধান। ডিভগুলি ফি স্টাইল করতে হবে:

.croppedTexts { 
  max-height: 32px;
  overflow: hidden;
}

এবং জেএস:

var list = document.body.getElementsByClassName("croppedTexts");
for (var i = 0; i < list.length; i++) {
  cropTextToFit(list[i]);
}

function cropTextToFit (o) {
  var lastIndex;
  var txt = o.innerHTML;
  if (!o.title) o.title = txt;

  while (o.scrollHeight > o.clientHeight) {
    lastIndex = txt.lastIndexOf(" ");
    if (lastIndex == -1) return;
    txt = txt.substring(0, lastIndex);
    o.innerHTML = txt + "…";
  }
}
— মিশাল পলিটজার
সূত্র
1

প্রশ্নের সঠিক উত্তর নয়, খুব অনুরূপ করার চেষ্টা করার সময় আমি এই পৃষ্ঠাটি জুড়ে এসে পৌঁছেছি, তবে কেবল একটি সরল উপবৃত্তির পরিবর্তে "আরও দেখার জন্য" একটি লিঙ্ক যুক্ত করতে চাইছি। এটি একটি jQuery ফাংশন যা কোনও পাত্রে উপচে পড়ছে এমন পাঠ্যে একটি "আরও" লিঙ্ক যুক্ত করবে। ব্যক্তিগতভাবে আমি এটি বুটস্ট্র্যাপের সাথে ব্যবহার করছি, তবে অবশ্যই এটি ছাড়াই কার্যকর হবে।

আরও স্ক্রিনশট উদাহরণ

ব্যবহার করতে, আপনার পাঠ্যটি একটি পাত্রে রাখুন:

<div class="more-less">
    <div class="more-block">
        <p>The long text goes in here</p>
    </div>
</div>

যখন নিম্নলিখিত jQuery ফাংশনটি যুক্ত করা হবে, তখন অ্যাডজাস্টাইট মানের চেয়ে বড় যে কোনও ডিভকে ছেঁটে ফেলা হবে এবং একটি "আরও" লিঙ্ক যুক্ত করা হবে।

$(function(){
    var adjustheight = 60;
    var moreText = '+ More';
    var lessText = '- Less';
    $(".more-less .more-block").each(function(){
        if ($(this).height() > adjustheight){
            $(this).css('height', adjustheight).css('overflow', 'hidden');
            $(this).parent(".more-less").append
                ('<a style="cursor:pointer" class="adjust">' + moreText + '</a>');
        }
    });
    $(".adjust").click(function() {
        if ($(this).prev().css('overflow') == 'hidden')
        {
            $(this).prev().css('height', 'auto').css('overflow', 'visible');
            $(this).text(lessText);
        }
        else {
            $(this).prev().css('height', adjustheight).css('overflow', 'hidden');
            $(this).text(moreText);
        }
    });
});

এর ভিত্তিতে তবে আপডেট হয়েছে: http://shakenandstirredweb.com/240/jquery-moreless-text

— অ্যান্ডি বেভারলি
সূত্র
<sigh> আমি ভেবেছিলাম যে কেউ এটিকে হ্রাস করতে পারে সম্ভবতঃ কারণ এটি প্রশ্নের সঠিক উত্তর নয়। তবুও, আমি আশা করি যে কেউ এটির কাজে লাগবে, কারণ আমি অন্য কোথাও এই তথ্যটি জানতে পারিনি এবং এখানেই আমি অনুসন্ধানের পরে শেষ করেছি।
— অ্যান্ডি বেভারলি
1

উল্লিখিত ডটডটডট জিকিউরি প্লাগইনটি কৌণিকের সাথে দুর্দান্ত কাজ করেছে:

(function (angular) {
angular.module('app')
    .directive('appEllipsis', [
        "$log", "$timeout", function ($log, $timeout) {
            return {
                restrict: 'A',
                scope: false,
                link: function (scope, element, attrs) {

                    // let the angular data binding run first
                    $timeout(function() {
                        element.dotdotdot({
                            watch: "window"
                        });
                    });
                }
            }

        }
    ]);
})(window.angular);

সংশ্লিষ্ট মার্কআপটি হ'ল:

<p app-ellipsis>{{ selectedItem.Description }}</p>
— এডওয়ার্ড ওলামিসান
সূত্র
1

খাঁটি জেএস ডেমো (jQuery ছাড়াই এবং 'যখন' লুপ)

আমি যখন মাল্টলাইন উপবৃত্ত সমস্যার সমাধানটি অনুসন্ধান করেছি তখন আমি অবাক হয়েছি যে jQuery ছাড়া ভাল কোনও নেই। এছাড়াও 'যখন' লুপের উপর ভিত্তি করে কয়েকটি সমাধান রয়েছে তবে আমি মনে করি অসীম লুপে আসার সম্ভাবনা থাকার কারণে তারা কার্যকর এবং বিপজ্জনক নয়। সুতরাং আমি এই কোড লিখেছি:

function ellipsizeTextBox(el) {
  if (el.scrollHeight <= el.offsetHeight) {
    return;
  }

  let wordArray = el.innerHTML.split(' ');
  const wordsLength = wordArray.length;
  let activeWord;
  let activePhrase;
  let isEllipsed = false;

  for (let i = 0; i < wordsLength; i++) {
    if (el.scrollHeight > el.offsetHeight) {
      activeWord = wordArray.pop();
      el.innerHTML = activePhrase = wordArray.join(' ');
    } else {
      break;
    }
  }

  let charsArray = activeWord.split('');
  const charsLength = charsArray.length;

  for (let i = 0; i < charsLength; i++) {
    if (el.scrollHeight > el.offsetHeight) {
      charsArray.pop();
      el.innerHTML = activePhrase + ' ' + charsArray.join('')  + '...';
      isEllipsed = true;
    } else {
      break;
    }
  }

  if (!isEllipsed) {
    activePhrase = el.innerHTML;

    let phraseArr = activePhrase.split('');
    phraseArr = phraseArr.slice(0, phraseArr.length - 3)
    el.innerHTML = phraseArr.join('') + '...';
  }
}

let el = document.getElementById('ellipsed');

ellipsizeTextBox(el);
— WebBrother
সূত্র
1

হতে পারে বেশ দেরিতে তবে এসসিএসএস ব্যবহার করে আপনি কোনও ফাংশন ডিক্লেয়ার করতে পারেন:

@mixin clamp-text($lines, $line-height) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  line-height: $line-height;
  max-height: unquote('#{$line-height*$lines}em');

  @-moz-document url-prefix() {
    position: relative;
    height: unquote('#{$line-height*$lines}em');

    &::after {
      content: '';
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 30%;
      height: unquote('#{$line-height}em');
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1) 50%
      );
    }
  }
}

এবং এটি ব্যবহার করুন:

.foo {
    @include clamp-text(1, 1.4);
}

যা পাঠ্যটিকে এক লাইনে ছাঁটাইবে এবং জেনে রাখবে যে এটির লাইন উচ্চতা 1.4। প্রত্যাশিত আউটপুটটি ...শেষের সাথে রেন্ডার করার জন্য ক্রোম এবং শেষে কিছু শীতল বিবর্ণ সহ এফএফ

ফায়ারফক্স

এখানে চিত্র বর্ণনা লিখুন

ক্রৌমিয়াম

এখানে চিত্র বর্ণনা লিখুন

— অ্যালেক্সিস দুরান
সূত্র
1

অ্যাড্রিয়েন বিয়ের উত্তরে এই সংক্ষিপ্ত সিএসএস-এর সমাধান পেয়েছেন :

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}

এর মতো মার্চ 2020 ব্রাউজার সমর্থনের হয় 95.3% , ইন্টারনেট এবং অপেরা মিনি নেই করে নিয়ে যাচ্ছে। ক্রোম, সাফারি, ফায়ারফক্স এবং এজ এ কাজ করে।

— Yulian
সূত্র
0

আপনি সম্ভবত কুরিয়ারের মতো নির্দিষ্ট প্রস্থের ফন্ট ছাড়া এটি (বর্তমানে?) করতে পারবেন না without একটি নির্দিষ্ট-প্রস্থের ফন্টের সাথে প্রতিটি অক্ষর একই অনুভূমিক স্থানটি দখল করে, তাই আপনি সম্ভবত অক্ষরগুলি গণনা করতে পারেন এবং ফলকে বর্তমান ফন্টের আকারটি ইএমএস বা প্রাক্তনগুলিতে গুণতে পারেন। তারপরে আপনাকে কেবল একটি লাইনে কতগুলি অক্ষর ফিট আছে তা পরীক্ষা করে দেখতে হবে এবং তারপরে এটি ভেঙে ফেলতে হবে।

বিকল্পভাবে, অ-স্থির-ফন্টগুলির জন্য আপনি সমস্ত সম্ভাব্য অক্ষরের (যেমন i = 2px, m = 5px) ম্যাপিং তৈরি করতে সক্ষম হবেন এবং তারপরে গণিতটি করতে পারবেন। অনেক কুৎসিত কাজ যদিও।

— DanMan
সূত্র
0

@ ড্যানমানের সমাধানটি প্রসারিত করতে: যে ক্ষেত্রে ভেরিয়েবল-প্রস্থের ফন্ট ব্যবহার করা হয়, আপনি একটি গড় ফন্টের প্রস্থ ব্যবহার করতে পারেন। এটিতে দুটি সমস্যা রয়েছে: 1) অনেকগুলি ডাব্লু'র পাঠ্য উপচে পড়বে এবং 2) অনেকগুলি I এর সাথে একটি পাঠ্য আগে ছিন্ন করা হবে।

অথবা আপনি সবচেয়ে খারাপ পরিস্থিতি গ্রহণ করতে পারেন এবং "ডাব্লু" অক্ষরের প্রস্থ ব্যবহার করতে পারেন (যা আমি বিশ্বাস করি এর চেয়ে প্রশস্ত)। এটি উপরের সমস্যাটি 1 টি সরিয়ে দেয় তবে সমস্যা 2 তীব্র করে তোলে।

একটি পৃথক পদ্ধতির হতে পারে: overflow: clipডিভ এ ছেড়ে দিন এবং একটি উপবৃত্ত বিভাগ যুক্ত করুন (সম্ভবত অন্য ডিভ বা চিত্র)float: right; position: relative; bottom: 0px; (অপরিশোধিত)। কৌশলটি হ'ল পাঠ্যের শেষের দিকে চিত্রটি প্রদর্শিত হবে।

আপনি কেবল তখনই চিত্রটি প্রদর্শন করতে পারেন যখন আপনি জানেন যে এটি উপচে চলেছে (বলুন, প্রায় 100 টি অক্ষরের পরে)

— st.never
সূত্র
কী overflow: clip? এবং আপনি কি সেই সিএসএসের সাথে প্রত্যাশা floatকরবেন?
— কাপা
0

এই কোডটি সহ কোনও অতিরিক্ত র‍্যাপার ডিভের প্রয়োজন নেই যদি উপাদানটির উচ্চতা সর্বোচ্চ-উচ্চতার শৈলীর দ্বারা সীমাবদ্ধ থাকে।

// Shorten texts in overflowed paragraphs to emulate Operas text-overflow: -o-ellipsis-lastline
$('.ellipsis-lastline').each(function(i, e) {
    var $e = $(e), original_content = $e.text();
    while (e.scrollHeight > e.clientHeight)
        $e.text($e.text().replace(/\W*\w+\W*$/, '…'));
    $e.attr('data-original-content', original_content);
});

এছাড়াও এটি কোনও ডেটা অ্যাট্রিবিউটে মূল পাঠ্যটি সংরক্ষণ করে যা কেবল স্টাইল ব্যবহার করে প্রদর্শিত হতে পারে, যেমন। মাউস উপর:

.ellipsis-lastline {
    max-height: 5em;
}
.ellipsis-lastline:before {
    content: attr(data-original-content);
    position: absolute;
    display: none;
}
.ellipsis-lastline:hover:before {
    display: block;
}
— জোহান
সূত্র
1
এটি প্রায়শই অসীম লুপ।
— আটাদজ
0

আমার দৃশ্যে আমি উপরে উল্লিখিত কোনও ফাংশনটিতে কাজ করতে পারি না এবং ফন্ট-আকার বা ধারক আকার নির্বিশেষে কত লাইন প্রদর্শন করতে হবে তাও আমাকে ফাংশনটি বলার দরকার ছিল।

আমি ব্যবহারের উপর আমার সমাধান ভিত্তিক Canvas.measureText পদ্ধতি (whic একটি হল HTML5 এর হিসাবে ব্যাখ্যা বৈশিষ্ট্য) এখানে দ্বারা Domi , তাই এটি সম্পূর্ণরূপে ক্রস ব্রাউজার নয়।

আপনি দেখতে পাবেন কীভাবে এটি এই ঝাঁকুনিতে কাজ করে ।

এই কোড:

var processTexts = function processTexts($dom) {
    var canvas = processTexts .canvas || (processTexts .canvas = document.createElement("canvas"));

    $dom.find('.block-with-ellipsis').each(function (idx, ctrl) {
        var currentLineAdded = false;
        var $this = $(ctrl);

        var font = $this.css('font-family').split(",")[0]; //This worked for me so far, but it is not always so easy.
        var fontWeight = $(this).css('font-weight');
        var fontSize = $(this).css('font-size');
        var fullFont = fontWeight + " " + fontSize + " " + font;
        // re-use canvas object for better performance
        var context = canvas.getContext("2d");
        context.font = fullFont;

        var widthOfContainer = $this.width();
        var text = $.trim(ctrl.innerHTML);
        var words = text.split(" ");
        var lines = [];
        //Number of lines to span over, this could be calculated/obtained some other way.
        var lineCount = $this.data('line-count');

        var currentLine = words[0];
        var processing = "";

        var isProcessing = true;
        var metrics = context.measureText(text);
        var processingWidth = metrics.width;
        if (processingWidth > widthOfContainer) {
            for (var i = 1; i < words.length && isProcessing; i++) {
                currentLineAdded = false;
                processing = currentLine + " " + words[i];
                metrics = context.measureText(processing);
                processingWidth = metrics.width;
                if (processingWidth <= widthOfContainer) {
                    currentLine = processing;
                } else {
                    if (lines.length < lineCount - 1) {
                        lines.push(currentLine);
                        currentLine = words[i];
                        currentLineAdded = true;
                    } else {
                        processing = currentLine + "...";
                        metrics = context.measureText(processing);
                        processingWidth = metrics.width;
                        if (processingWidth <= widthOfContainer) {
                            currentLine = processing;
                        } else {
                            currentLine = currentLine.slice(0, -3) + "...";
                        }
                        lines.push(currentLine);
                        isProcessing = false;
                        currentLineAdded = true;
                    }
                }
            }
            if (!currentLineAdded)
                lines.push(currentLine);
            ctrl.innerHTML = lines.join(" ");
        }
    });
};

(function () {
    $(document).ready(function () {
        processTexts($(document));
    });
})();

এবং এটি ব্যবহার করার জন্য এইচটিএমএলটি এরকম হবে:

<div class="block-with-ellipsis" data-line-count="2">
    VERY LONG TEXT THAT I WANT TO BREAK IN LINES. VERY LONG TEXT THAT I WANT TO BREAK IN LINES.
</div>

ফন্ট-পরিবার পাওয়ার কোডটি বরং সহজ, এবং আমার ক্ষেত্রে কাজ করে তবে আরও জটিল পরিস্থিতিতে আপনার এই লাইনের সাথে কিছু ব্যবহার করতে হতে পারে ।

এছাড়াও, আমার ক্ষেত্রে আমি ফাংশনটিটি বলছি যে কতগুলি লাইন ব্যবহার করতে হবে, তবে আপনি ধারক আকার এবং ফন্ট অনুসারে কতগুলি লাইন প্রদর্শন করতে হবে তা গণনা করতে পারেন।

— Dzyann
সূত্র
0

আমি এমন একটি সংস্করণ তৈরি করেছি যা এইচটিএমএল অক্ষত থাকবে। jsfiddle উদাহরণ

jQuery এর

function shorten_text_to_parent_size(text_elem) {
  textContainerHeight = text_elem.parent().height();


  while (text_elem.outerHeight(true) > textContainerHeight) {
    text_elem.html(function (index, text) {
      return text.replace(/(?!(<[^>]*>))\W*\s(\S)*$/, '...');
    });

  }
}

$('.ellipsis_multiline').each(function () {
  shorten_text_to_parent_size($(this))
});

সিএসএস

.ellipsis_multiline_box {
  position: relative;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

jsfiddle উদাহরণ

— কি দারুন
সূত্র
0

আমি একটি কৌণিক উপাদান লিখেছি যা সমস্যার সমাধান করে। এটি একটি প্রদত্ত পাঠ্যকে স্প্যান উপাদানগুলিতে বিভক্ত করে। রেন্ডারিংয়ের পরে, এটি সমস্ত উপচে পড়া উপাদানগুলি সরিয়ে দেয় এবং শেষ দৃশ্যমান উপাদানটির ঠিক পরে উপবৃত্ত স্থাপন করে।

ব্যবহারের উদাহরণ:

<app-text-overflow-ellipsis [text]="someText" style="max-height: 50px"></app-text-overflow-ellipsis>

স্ট্যাকব্লিটজ ডেমো: https://stackblitz.com/edit/angular-wfdqtd

উপাদান:

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef, HostListener,
  Input,
  OnChanges,
  ViewChild
} from '@angular/core';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-text-overflow-ellipsis',
  template: `
    <span *ngFor="let word of words; let i = index" [innerHTML]="word + (!endsWithHyphen(i) ? ' ' : '')"></span>
    <span #ellipsis [hidden]="!showEllipsis && !initializing" [class.initializing]="initializing" [innerHTML]="'...' + (initializing ? '&nbsp;' : '')"></span>
  `,
  styles: [`
    :host {
      display: block; 
      position: relative;
    }
    .initializing {
      opacity: 0;
    }
  `
  ]
})

export class TextOverflowEllipsisComponent implements OnChanges {
  @Input()
  text: string;

  showEllipsis: boolean;
  initializing: boolean;

  words: string[];

  @ViewChild('ellipsis')
  ellipsisElement: ElementRef;

  constructor(private element: ElementRef, private cdRef: ChangeDetectorRef) {}

  ngOnChanges(){
    this.init();
  }

  @HostListener('window:resize')
  init(){
    // add space after hyphens
    let text = this.text.replace(/-/g, '- ') ;

    this.words = text.split(' ');
    this.initializing = true;
    this.showEllipsis = false;
    this.cdRef.detectChanges();

    setTimeout(() => {
      this.initializing = false;
      let containerElement = this.element.nativeElement;
      let containerWidth = containerElement.clientWidth;
      let wordElements = (<HTMLElement[]>Array.from(containerElement.childNodes)).filter((element) =>
        element.getBoundingClientRect && element !== this.ellipsisElement.nativeElement
      );
      let lines = this.getLines(wordElements, containerWidth);
      let indexOfLastLine = lines.length - 1;
      let lineHeight = this.deductLineHeight(lines);
      if (!lineHeight) {
        return;
      }
      let indexOfLastVisibleLine = Math.floor(containerElement.clientHeight / lineHeight) - 1;

      if (indexOfLastVisibleLine < indexOfLastLine) {

        // remove overflowing lines
        for (let i = indexOfLastLine; i > indexOfLastVisibleLine; i--) {
          for (let j = 0; j < lines[i].length; j++) {
            this.words.splice(-1, 1);
          }
        }

        // make ellipsis fit into last visible line
        let lastVisibleLine = lines[indexOfLastVisibleLine];
        let indexOfLastWord = lastVisibleLine.length - 1;
        let lastVisibleLineWidth = lastVisibleLine.map(
          (element) => element.getBoundingClientRect().width
        ).reduce(
          (width, sum) => width + sum, 0
        );
        let ellipsisWidth = this.ellipsisElement.nativeElement.getBoundingClientRect().width;
        for (let i = indexOfLastWord; lastVisibleLineWidth + ellipsisWidth >= containerWidth; i--) {
          let wordWidth = lastVisibleLine[i].getBoundingClientRect().width;
          lastVisibleLineWidth -= wordWidth;
          this.words.splice(-1, 1);
        }


        this.showEllipsis = true;
      }
      this.cdRef.detectChanges();

      // delay is to prevent from font loading issues
    }, 1000);

  }

  deductLineHeight(lines: HTMLElement[][]): number {
    try {
      let rect0 = lines[0][0].getBoundingClientRect();
      let y0 = rect0['y'] || rect0['top'] || 0;
      let rect1 = lines[1][0].getBoundingClientRect();
      let y1 = rect1['y'] || rect1['top'] || 0;
      let lineHeight = y1 - y0;
      if (lineHeight > 0){
        return lineHeight;
      }
    } catch (e) {}

    return null;
  }

  getLines(nodes: HTMLElement[], clientWidth: number): HTMLElement[][] {
    let lines = [];
    let currentLine = [];
    let currentLineWidth = 0;

    nodes.forEach((node) => {
      if (!node.getBoundingClientRect){
        return;
      }

      let nodeWidth = node.getBoundingClientRect().width;
      if (currentLineWidth + nodeWidth > clientWidth){
        lines.push(currentLine);
        currentLine = [];
        currentLineWidth = 0;
      }
      currentLine.push(node);
      currentLineWidth += nodeWidth;
    });
    lines.push(currentLine);

    return lines;
  }

  endsWithHyphen(index: number): boolean {
    let length = this.words[index].length;
    return this.words[index][length - 1] === '-' && this.words[index + 1] && this.words[index + 1][0];
  }
}
— মার্টিন ক্রেমার
সূত্র
0

এখানে আমি দ্রুত অ্যালগরিদম দিয়ে অন্য একটি গ্রন্থাগার তৈরি করেছি। দয়া করে পরীক্ষা করুন:

https://github.com/i-ahmed-biz/fast-ellipsis

বোর ব্যবহার করে ইনস্টল করতে:

bower install fast-ellipsis

এনপিএম ব্যবহার করে ইনস্টল করতে:

npm install fast-ellipsis

আশা করি তুমি উপভোগ কর!

— আই আহমদ
সূত্র
-2

আপনি যা সন্ধান করছেন এটি এটি কিনা নিশ্চিত না, এটি উচ্চতার পরিবর্তে ন্যূনতম উচ্চতা ব্যবহার করে।

    <div id="content" style="min-height:10px;width:190px;background:lightblue;">
    <?php 
        function truncate($text,$numb) {
            // source: www.kigoobe.com, please keep this if you are using the function
            $text = html_entity_decode($text, ENT_QUOTES);
            if (strlen($text) > $numb) {
                $text = substr($text, 0, $numb);
                $etc = "..."; 
                $text = $text.$etc;
            } 
            $text = htmlentities($text, ENT_QUOTES);
            return $text;
        }
        echo truncate("this is a multi-lines text block, some lines inside the div, while some outside", 63);
    ?>
    </div>
— khairil
সূত্র
4
সমস্যাটি হ'ল আপনার কোডগুলিতে 63৩ নম্বর, যদি নম্বরটি জানা থাকে তবে সবকিছু সহজ হয়ে যায়, কেবল একটি কোডগুলি আপনার কোড হিসাবে এই কাজটি করে। তবে নাম্বারটি কীভাবে জানবেন? অন্য কথায়, কীভাবে পাঠ্যটি লাইন-ব্রেক হবে তা জানবেন? যদি এই প্রশ্নের উত্তর দেওয়া যায়, তবে সমস্যাটি কেবল "1" এর যুক্তিতে সমাধান করা যেতে পারে, সংখ্যাটি গণনা করুন; 2, ছাঁটাই করুন
— অ্যাডওয়ার্ড
-3

খুব সাধারণ ফানক করবে।

নির্দেশিকা:

  $scope.truncateAlbumName = function (name) {
    if (name.length > 36) {
      return name.slice(0, 34) + "..";
    } else {
      return name;
    }
  };

দেখুন:

<#p>{{truncateAlbumName(album.name)}}<#/p>
— yamenator
সূত্র
3
যেমনটি আমরা ইতিমধ্যে অন্য উত্তরের অধীনে আলোচনা করেছি, আপনার কোডের সমস্যাটি হ'ল ৩ 36 নম্বর your । iiiiiiiiiiবনাম দেখুন MMMMMMMMMM(বর্তমান ফন্টের সাথে যদিও এটি দৃশ্যমান নয়: ডি)।
— কাপা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.