সিএসএসের সাহায্যে মাল্টি-লাইনের ওভারফ্লোড ব্লকের জন্য "…" ব্যবহার করুন

Question

সঙ্গে

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

"..." প্রবাহিত হলে লাইনের শেষে দেখানো হবে। তবে এটি কেবল একটি লাইনে প্রদর্শিত হবে। তবে আমি এটি বহু-লাইনে দেখানো চাই।

দেখে মনে হচ্ছে:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

Comments

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

— ওয়েক্স

সম্পর্কিত স্ট্যাকওভারফ্লো.com

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

এই বিষয়টিতে

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

আমার উত্তরের জন্য দয়া করে নীচের লিঙ্কটি দেখুন: stackoverflow.com/questions/536814/…

— শিশির অরোরা

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

— ড্যাশার্ড

Answer 1

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

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

কিছু অগ্রগতি পরীক্ষাও রয়েছে ।

Comments

আমি এই প্রয়োজনীয়তার কোনও খাঁটি সিএসএস সমাধান দেখিনি

— জিম থমাস

@ ওভিলিয়া নোট করুন যে জিমের সমাধানটিতে jquery.autoellipsis.js নামে একটি jQuery প্লাগইন রয়েছে, আপনাকে আলাদাভাবে একটি অন্তর্ভুক্ত ডাউনলোড করতে হবে

— জেফ

সিএসএস মাল্টলাইন এলিপিস

— জুলিয়ান

ভবিষ্যতের প্রিয় ব্যক্তিগণ: এই প্লাগইনটি আমার পছন্দসই, কারণ এটি লুকানো পাঠ্যের টগলিং প্রদর্শনের অনুমতি দেয়। http://keith-wood.name/more.html

— brichins

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

— মিলন জারোস

Answer 2

আমি এর কাছাকাছি কিছু অর্জন করতে সক্ষম না হওয়া পর্যন্ত আমি প্রায় হ্যাক করেছি। এটি কয়েকটি সতর্কতার সাথে আসে:

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

আমার এটিও লক্ষ্য করা উচিত যে পাঠ্যটি একটি বর্ণের সীমানায় ভেঙে যাবে, কোনও চরিত্রের সীমানায় নয়। এটি ইচ্ছাকৃত ছিল (যেহেতু আমি দীর্ঘতর গ্রন্থগুলির জন্য এটি আরও ভাল বিবেচনা করি) তবে এটি কারণ থেকে আলাদাtext-overflow: ellipsis তার চেয়ে আমি ভেবেছিলাম আমার এটি উল্লেখ করা উচিত।

আপনি যদি এই সাবধানতার সাথে বেঁচে থাকতে পারেন তবে এইচটিএমএল দেখতে এই রকম দেখাচ্ছে:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

এবং এটি সম্পর্কিত সিএসএস, একটি সাদা পটভূমিতে তিন লাইনের পাঠ্য সহ 150 পিক্সেল প্রশস্ত বাক্সের উদাহরণ ব্যবহার করে। এটি ধরে নিয়েছে আপনার একটি সিএসএস রিসেট বা অনুরূপ রয়েছে যা মার্জিন এবং প্যাডিংসকে প্রয়োজনীয় যেখানে শূন্যে সেট করে।

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

ফলাফলটি এরকম দেখাচ্ছে:

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

আইই 9, আই 88 (এমুলেটেড), ক্রোম, ফায়ারফক্স, সাফারি এবং অপেরাতে পরীক্ষিত। আই 7 তে কাজ করে না।

Comments

আপনি সত্যিই দেওয়া 4 HTML উপাদানগুলি প্রয়োজন হবে না your textসঙ্গে আবৃত করা হয় <p>ট্যাগ (যেমন তাদের উচিত), তারপর আপনি ব্যবহার করতে পারেন .ellipsify p:beforeএবং .ellipsify p:afterতারপর অবশ্যই আপনার প্রয়োজন ঊহ্য শব্দ জন্য কোড, এছাড়াও, প্রয়োজন হতে পারে হিসাবে তারা কাজ নাও করতে পারে খালি উপাদান জন্য। .ellipsify p:before{content:"\2026";}\2026content:" ";

— Val,

যদিও আমি মনে করি না যে এই উত্তরটি অনেক পরিস্থিতিতে উপযুক্ত হবে তবে কমপক্ষে একটি প্লাগ-নন, জাভাস্ক্রিপ্টহীন উত্তর সরবরাহ করা হয়েছে। এই এবং উত্তরটির নির্মাণে যে চৌকসতা চলেছিল তা হ'ল কেন আমি +1এটি যুক্ত করছি ।

— ভয়েডকিং

@ মিচালস্টেফানো মাত্র একটি - যার জন্য আমি এটি তৈরি করেছি: অ্যাপটিভেট.এমএসে অ্যাপ্লিকেশন "কার্ড" এর বিবরণ, উদাহরণস্বরূপ অ্যাপটিভেট.এমএস / ইউজার / 1141291/ blynn দেখুন ।

— বালফা

@ পাভলো, আমি আপনার সমাধানটি সত্যিই পছন্দ করি। তবে এটি কেবলমাত্র মানক পাঠ্য দিয়েই কাজ করছে বলে মনে হচ্ছে, আমি যদি কোনও ডিবি থেকে পাঠ্য লোড করি না, স্ক্রিপ্টের কারণ হয় না তবে বোঝা পাঠ্যের বহিরাংশের উচ্চতাটি জানেন না?

— জনস্নো

@ স্কুইজারশোগি, সিউডো-উপাদান বা না, এই সমাধানটি জেএসের উপর নির্ভর করে না। আপনি যদি সঠিকভাবে এটি প্রয়োগ করেন তবে পাঠ্যটি কোথা থেকে পাবেন তা বিবেচ্য নয়।

— পাভলো

Answer 3

এখানে একটি সাম্প্রতিক সিএসএস-ট্রিকস নিবন্ধ যা এটি আলোচনা করেছে।

উপরের নিবন্ধের কয়েকটি সমাধান (যা এখানে উল্লেখ করা হয়নি)

1) -webkit-line-clamp এবং 2) বিবর্ণ হয়ে যাওয়ার সাথে ডানদিকে নীচে একেবারে অবস্থানযুক্ত উপাদান রাখুন

উভয় পদ্ধতিই নিম্নলিখিত মার্কআপ ধরে:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

সিএসএস সহ

.module {
  width: 250px;
  overflow: hidden;
}

1) -উবকিট-লাইন-বাতা

লাইন-ক্ল্যাম্প FIDDLE ( .. সর্বোচ্চ 3 লাইনের জন্য)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) বিবর্ণ

ধরা যাক আপনি লাইন-উচ্চতাটি 1.2 মিমি তে সেট করেছেন। যদি আমরা তিনটি পাঠ্য পাঠ্য প্রকাশ করতে চাই তবে আমরা কেবল ধারকটির উচ্চতা 3.6 মিমি (1.2 মিমি × 3) করতে পারি। গোপন ওভারফ্লো বাকিটি লুকিয়ে রাখবে।

FIDDLE বিবর্ণ

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

সমাধান # 3 - @ সমর্থন ব্যবহার করে একটি সংমিশ্রণ

ওয়েবকিট ব্রাউজারগুলিতে ওয়েবকিটের লাইন-ক্ল্যাম্প প্রয়োগ করতে এবং অন্যান্য ব্রাউজারগুলিতে বিবর্ণ প্রয়োগ করতে আমরা @ সাপোর্টপোর্টগুলি ব্যবহার করতে পারি।

ফেইড ফ্যালব্যাক ফেডল সহ @ সাপোর্ট লাইন-ক্ল্যাম্প

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

সিএসএস

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

Comments

@ এইচপি এর 411 ফায়ারফক্সে, আপনি উপবৃত্তের পরিবর্তে বিবর্ণ প্রভাব দেখতে পাবেন

— ড্যানিয়েলড

Answer 4

নীচের লিঙ্কটি এই সমস্যার খাঁটি এইচটিএমএল / সিএসএস সমাধান সরবরাহ করে।

ব্রাউজার সমর্থন - যেমন নিবন্ধে বলা হয়েছে:

এখন পর্যন্ত আমরা সাফারি 5.0, আইই 9 (অবশ্যই স্ট্যান্ডার্ড মোডে থাকতে হবে), অপেরা 12 এবং ফায়ারফক্স 15 এ পরীক্ষা করেছি।

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

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

সিএসএস:

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

এইচটিএমএল:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

বেহালা

(পরীক্ষার জন্য ব্রাউজারের উইন্ডোটির আকার পরিবর্তন করুন)

Comments

"এ পর্যন্ত আমরা পরীক্ষা করেছেন ..." সবকিছু কিন্তু Chrome রয়েছে?

— স্টিভেনস্পিল

পরীক্ষাটি পাস হয়েছেChrome for Mac Version 48.0.2564.116

— এড্রিয়েন বি

Answer 5

পাঠ্য-ওভারফ্লোর জন্য ডাব্লু 3 এর উপর নজর রাখার পরে , আমি মনে করি না যে এটি কেবলমাত্র সিএসএস ব্যবহার করেই সম্ভব। এলিপসিস একটি নতুন-ইশ সম্পত্তি, তাই সম্ভবত এটি এখনও খুব বেশি ব্যবহার বা প্রতিক্রিয়া পায় নি।

তবে, এই লোকটি একটি অনুরূপ (বা অভিন্ন) প্রশ্ন জিজ্ঞাসা করেছে বলে মনে হচ্ছে এবং কেউ একটি সুন্দর jQuery সমাধান নিয়ে আসতে সক্ষম হয়েছিল। আপনি সমাধানটি এখানে ডেমো করতে পারেন: http://jsfiddle.net/MPkSF/

জাভাস্ক্রিপ্ট যদি কোনও বিকল্প না হয় তবে আমার ধারণা আপনার ভাগ্যের বাইরে চলে যেতে পারে ...

Comments

নিউ পর? এমএসআইই আইআই 6 এর পর থেকে এটি সমর্থন করে। আজ, ফায়ারফক্স বাদে সমস্ত ব্রাউজার এটিকে সমর্থন করে ।

— খ্রিস্টান

আমি এমন কোনও CSS3 সম্পত্তি কল করব যা বিশ্বব্যাপী প্রয়োগ করা হয়নি "নতুন-ইশ"। এটি কেবল শব্দার্থবিদ্যার বিষয়। এছাড়াও, আপনি কি বুঝতে পেরেছেন যে আপনি প্রায় এক বছরের পুরানো পোস্টে মন্তব্য করছেন?

— জেফ

এটি CSS3 নয়, এটি যুগে যুগে রয়েছে এবং ব্যাপকভাবে গৃহীত হয়েছে। কেবলমাত্র স্পেসিফিকেশনটিকেই নতুন হিসাবে বিবেচনা করা যেতে পারে। এছাড়াও, যদি এসও পুরানো থ্রেডগুলিতে মন্তব্য না চায় তবে তারা এটিকে অক্ষম করতে পারত।

— খ্রিস্টান

Answer 6

সম্পূর্ণতার জন্য এই প্রশ্নটিতে যুক্ত করতে চান।

• এই --এলিপিসিস-লাস্টলাইন নামে পরিচিত ওপেনার মানহীন সমর্থন রয়েছে ।
• ডটডটট হ'ল একটি দুর্দান্ত jQuery প্লাগইন যা আমি সুপারিশ করতে পারি।

Comments

দেখে মনে হচ্ছে -o-ellipsis-lastlineঅপেরা যখন ওয়েবকিটে স্যুইচ করেছে তখন সরিয়ে দেওয়া হয়েছে। Bulletতিহাসিক উদ্দেশ্যে বুলেট ছাড়ছে।

— ম্যাট

Answer 7

দুর্দান্ত প্রশ্ন ... আমি আশা করি কোনও উত্তর ছিল, তবে এই দিনগুলিতে আপনি সিএসএসের সাথে এটি পেতে পারেন। কোনও উপবৃত্তাকার নয়, তবে এখনও বেশ ব্যবহারযোগ্য।

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

Comments

প্রকৃতপক্ষে, কেভিনের উত্তর এই দিনগুলিতে আপনি সিএসএসের সাথে সবচেয়ে কাছের পেতে পারেন স্ট্যাকওভারফ্লো.com

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

Answer 8

আমি এই সিএসএস (scss) সমাধানটি পেয়েছি যা বেশ ভালভাবে কাজ করে। ওয়েবকিট ব্রাউজারগুলিতে এটি উপবৃত্তগুলি প্রদর্শন করে এবং অন্যান্য ব্রাউজারগুলিতে এটি কেবল পাঠ্যকে ছাঁটাই করে। যা আমার উদ্দেশ্যযুক্ত ব্যবহারের জন্য জরিমানা।

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

স্রষ্টার একটি উদাহরণ: http://codepen.io/martinwolf/pen/qlFdp

Comments

-webkit-line-clampব্রাউজার সমর্থনের caniuse.com/#search=-webkit-line-clamp

— Adrien হউন

Answer 9

এখানে স্রেফ সিএসএস ব্যবহারের সবচেয়ে কাছের সমাধানটি।

এইচটিএমএল

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

সিএসএস

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

ওয়ার্কিং ফিডল ( চেক করতে উইন্ডোর আকার পরিবর্তন করুন )

ব্যাখ্যার জন্য আমার ব্লগে লিঙ্ক

আপডেট

আমি আশা করি এখন কিছু সিএসএস বিশেষজ্ঞ কীভাবে এটিকে নিখুঁত করতে পারেন সে সম্পর্কে ধারণা পেয়েছিলেন। :)

Comments

এই উত্তরটি আমাকে পেট-ব্যথা দিচ্ছে। প্রথমত, আপনি টাইপোগ্রাফিকভাবে উপলব্ধ উপবৃত্ত ব্যবহার করবেন না ... (এটি একটি স্থান গ্রহণ করার জন্য একটি ফন্ট প্রতীক)। তুলনা করুন smashingmagazine.com/2008/08/11/top-ten-web-typography-sins আর তোমার সমাধান দ্বারা, আপনি কি সত্যিই, যেখানে ঊহ্য শব্দ থাকার বিষয়টি মতেই নিয়ন্ত্রণ করতে পারে না তাই এটি একটি সারিতে বিন্দু মত, অবাঞ্ছিত পরিস্থিতিতে আসতে পারেন ।

— ভোলকার ই।

@VolkerE। তথ্যের জন্য ধন্যবাদ. এখানে আপডেট করা ফিজল । আপনার ব্যাখ্যাতে আমি কোনও পয়েন্ট মিস করছি কিনা দয়া করে আমাকে জানান।

— মিঃগ্রিন

দুর্দান্ত সমাধান (মূল এক), তবে কেন এটির div::beforeপরিবর্তে ব্যবহার করবেন না span? :)

— অ্যাডাম

@ অ্যাডাম কিছু প্রান্ত মামলা ছিল, তাই আমি ছদ্ম উপাদান ব্যবহার করিনি। ( আমার এখন এটি মনে নেই )

— মিস্টার_গ্রিন

Answer 10

এখানে অনেক উত্তর রয়েছে তবে আমার একটি দরকার ছিল যা ছিল:

• কেবল সিএসএস
• ভবিষ্যত-প্রমাণ (সময়ের সাথে আরও সুসংগত হয়)
• শব্দগুলি পৃথকীকরণ করা যাচ্ছে না (কেবল ফাঁকা জায়গায় বিরতি)

সতর্কবাণীটি হ'ল এটি ব্রাউজারগুলির জন্য একটি উপবৃত্তির সরবরাহ করে না যা -webkit-line-clampনিয়ম সমর্থন করে না (বর্তমানে আইই, এজ, ফায়ারফক্স) তবে এটি তাদের পাঠ্য বিবর্ণ করার জন্য গ্রেডিয়েন্ট ব্যবহার করে না।

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

আপনি এটি এই কোডপেনের ক্রিয়াতে দেখতে পারেন এবং আপনি এখানে একটি জাভাস্ক্রিপ্ট সংস্করণ দেখতে পারেন (কোন jQuery নেই)।

Comments

বিবর্ণ পাঠ্য একটি দুর্দান্ত সমাধান - ধন্যবাদ!

— ড্যানিয়েল নাব

Answer 11

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

সিএসএস:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

এইচটিএমএল:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

ঝাঁকুনিতে আরও বিশদ। ব্রাউজারটি রিফ্লু করে এমন একটি সমস্যা রয়েছে যে আমি একটি জেএস পুনরায় চিত্র ব্যবহার করি এবং এর জন্য এটি পরীক্ষা করে দেখুন তবে এটি মূল ধারণা। কোন চিন্তা / পরামর্শ অনেক প্রশংসা করা হয়।

Comments

আমি পাঠ্যের প্রতিটি লাইন নকল করার চিন্তা পছন্দ করি না। তদ্ব্যতীত - পাঠ্যটি গতিশীল হলে কী - আপনি কত লাইন যুক্ত করবেন তা জানেন না। বলা হচ্ছে, এই অনন্য সমাধানের জন্য +1!

— ড্যানিয়েল্ড

ইনপুটটির জন্য ধন্যবাদ :) গতিশীল পাঠ্য কোনও সমস্যা নয়। এটি মূলত পরিবর্তে টেমপ্লেটে ধারকটির সর্বাধিক উচ্চতা নির্ধারণ করে। আপনি যদি এটি 3 লাইনে সীমাবদ্ধ করতে চান তবে 3 তৈরি করুন My এগুলি জ্ঞাত মান। স্ট্রিংটি কত দীর্ঘ তা বিবেচনা করে না। এছাড়াও আপনি যদি কোনও টেম্পলেট অবস্থায় এটি করেন এবং স্থির এইচটিএমএল না করেন তবে আপনি এটি একটি ইনলাইন শৈলীর সাথে নেতিবাচক টেক্সট-ইনডেন্ট পরিচালনা করতে পারেন যাতে আপনার লাইন 1, লাইন 2, লাইন 3 ইত্যাদির বৃহত ব্লকের প্রয়োজন হয় না I একটি ফেডল উদাহরণস্বরূপ জেএস টেমপ্লেট ব্যবহার করে।

— লুপোস

শব্দ ভাঙ্গা প্রকল্পে কোনও সমস্যা না হলে সহায়ক হবে।

— মিঃগ্রিন

Answer 12

ধন্যবাদ @ বালফা এবং @ কেভিন, আমি দুটি পদ্ধতি একত্রিত করেছি।

এই পদ্ধতিতে কোনও জেএস দরকার নেই।

আপনি ব্যবহার করতে পারেন background-imageএবং বিন্দুগুলি আড়াল করার জন্য কোনও গ্রেডিয়েন্টের প্রয়োজন নেই।

innerHTMLএর .ellipsis-placeholderপ্রয়োজন হয় না, আমি ব্যবহার .ellipsis-placeholderএকই প্রস্থ এবং উচ্চতা রাখার .ellipsis-more। display: inline-blockপরিবর্তে আপনি ব্যবহার করতে পারেন ।

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

Answer 13

জাভাস্ক্রিপ্ট সমাধান আরও ভাল হবে

• পাঠ্যের লাইন সংখ্যা পান
• is-ellipsisউইন্ডোর আকার পরিবর্তন বা এলেন্ট পরিবর্তন হলে টগল ক্লাস

getRowRects

Element.getClientRects()এই মত কাজ করে

একই সারিতে প্রতিটি rects একই হয়েছে topমান, তাই বিভিন্ন সঙ্গে rects জানতে topমান, মত এই

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

ভাসা ...more

এই মত

উইন্ডোর আকার পরিবর্তন বা উপাদান পরিবর্তিত সনাক্ত করুন

এই মত

Answer 14

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 

আরও ক্লিক এখানে দেখুন

Answer 15

ওয়েবেকিট-লাইন-ক্ল্যাম্পে একটি খাঁটি সিএসএস পদ্ধতি বেস:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Answer 16

আমি একটি জাভাস্ক্রিপ্ট ট্রিক পেয়েছি, তবে আপনাকে স্ট্রিংয়ের দৈর্ঘ্যটি ব্যবহার করতে হবে। আপনাকে বলুন যে আপনি প্রস্থের 250px এর 3 লাইন চান, আপনি প্রতি লাইনে দৈর্ঘ্য গণনা করতে পারেন

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}

Comments

সম্ভবত, আমরা সর্বত্র স্থির-প্রস্থের ফন্ট ব্যবহার করি না। সুতরাং এই কৌশল এই পরিস্থিতিতে ব্যর্থ হতে পারে।

— ওভিলিয়া