পাঠ্য-ওভারফ্লো: উপবৃত্তগুলি কাজ করছে না

Question

এটিই আমি চেষ্টা করেছি (দেখুন এখানে ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

মূলত, আমি উইন্ডোটি ছোট হয়ে যাওয়ার সাথে স্প্যানটি উপবৃত্তির সাথে সঙ্কুচিত হতে চাই। আমি কি ভুল করছি?

Comments

উপবৃত্তির কাজ করার জন্য প্রয়োজনীয়তাগুলি: stackoverflow.com/a/33061059/3597276

— মাইকেল বেঞ্জামিন

আমি যখন সমস্যাটি ভেবেছিলাম এটি কাজ করছে না তখন আমি প্রস্থটি দীর্ঘায়িত করিনি (10px)। তাই আমি উপবৃত্তটি কেটে দিচ্ছিলাম, দোহ!

— রড

Answer 1

আপনার সিএসএস overflow, width(বা max-width) display, এবং থাকা দরকার white-space।

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

---

পরিশিষ্ট আপনি যদি লাইন ক্ল্যাম্পিং (মাল্টলাইন ওভারফ্লো উপবৃত্ত) করার কৌশলগুলির একটি ওভারভিউ চান, তবে এই সিএসএস-ট্রিকস পৃষ্ঠাটি দেখুন: https://css-tricks.com/line-clampin/

Addendum2 (মে 2019)
হিসাবে এই লিঙ্কে দাবি, ফায়ারফক্স 68 সমর্থন করবে -webkit-line-clamp(!)

Comments

হোয়াইট স্পেসের সম্পত্তিটি আমি যা অনুভব করছিলাম। ধন্যবাদ।

— নেবুলাসগার্ল

এটি আপনার white-space: nowrap;সম্পত্তি প্রয়োজন যে sucks । এখন আপনি কেবল পাঠ্যের একটি লাইন ব্লক পাঠ্যের পরিবর্তে ... দিয়ে শেষ করতে পারবেন।

— সোভেন ভ্যান জোলেন

আজ, সমস্ত প্রধান ব্রাউজারগুলি উপবৃত্তিকে সমর্থন করে: caniuse.com/#feat=text-overflow

— কাজি

@ বাসজিরো মাল্টলাইন এলিপসিস কেবল সিএসএসের সাহায্যে সমর্থিত নয়। আপনাকে অন্যান্য পদক্ষেপ নিতে হবে

— ইউনজেন

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

— মাইকেল অ্যাংস্টাড্ট

Answer 2

আপনার কাছে একটি ব্লক উপাদান রয়েছে, সর্বাধিক আকার এবং লুকানোতে ওভারফ্লো সেট করা আছে তা নিশ্চিত করুন। (আইই 9 এবং এফএফ 7 তে পরীক্ষিত)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Comments

সাদা-স্পেসের মতো মনে হয়: ফাঁকা স্থানের কোনও কিছুর জন্য এখন সাধারণত সম্পত্তিও প্রয়োজনীয় হতে পারে।

— Kzqai

উপরের মন্তব্যের সঠিক সদৃশ d

— নেবুলাস গার্ল

@ নিউবুলাস গারল: আসলে কাজকাইয়ের মন্তব্য হেরসার্কারের মন্তব্যে পোস্ট হওয়া লোকদের চেয়ে আগের ছিল।

— Lepe

আইই-তে বিচক্ষণতা রয়েছে - আইই দ্বিতীয় শব্দটি আবৃত করে না (আইই 11 এ পরীক্ষা করা হয়েছে) ... চিত্র দেখুন। প্রত্যাশা অনুযায়ী অন্য যে কোনও ব্রাউজারে কাজ করে (ভাল পুরানো অপেরা 12 সহ)।

— নক্স

@ নক্স এটি এমএস এজ ব্রাউজারেও প্রত্যাশার মতো কাজ করছে না

— ইউনজেন

Answer 3

Chrome- এ মাল্টি-লাইনের জন্য:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

ইউটিউব থেকে অনুপ্রাণিত ;-)

Comments

এটি একটি খুব আকর্ষণীয় সমাধান। এটি -webkit-*বৈশিষ্ট্যগুলি ব্যবহার করে তবে সমস্ত বড় ব্রাউজারে এটি সমর্থিত। আরও তথ্য এখানে পাওয়া যাবে: css-tricks.com/almanac/properties/l/line-clamp

— dkniffin

Answer 4

ক্রোমের অধীনে এলিপসিস নিয়ে আমার সমস্যা ছিল। হোয়াইট-স্পেস চালু হচ্ছে: এখন চাপটি ঠিক করেছে বলে মনে হচ্ছে।

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

Answer 5

word-wrap: break-word;

এটি এবং কেবল এটিই আমার জন্য কাজ করেছিল

<pre> </pre> 

ট্যাগ

উপবৃত্তি করতে অন্য কিছু ব্যর্থ হয়েছে ....

Answer 6

যে কেউ এরজন্যই হোঁচট খেতে পারে তার কেবলমাত্র মাথাব্যাথা ... আমার এইচ 2 উত্তরাধিকার সূত্রে পেয়েছিল

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

যা উপবৃত্তির অনুমতি দিচ্ছিল না। স্পষ্টতই এই খুব ফিনকি?

Answer 7

আপনি যেখানে চান সেখানে নীচের কোডটি যুক্ত করুন

উদাহরণ

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Answer 8

একাধিক লাইনের জন্য

ক্রোমে, আপনি যদি একাধিক লাইনে উপবৃত্ত প্রয়োগ করতে চান তবে আপনি এই সিএসএস প্রয়োগ করতে পারেন।

এছাড়াও আপনি যোগ করতে পারেন প্রস্থ নির্দিষ্ট প্রস্থ উপাদান উল্লেখ করতে আপনার CSS এ:

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

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Answer 9

আপনি সিএসএসে নিম্নলিখিতগুলি যোগ করে উপবৃত্ত ব্যবহারের চেষ্টা করতে পারেন:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

তবে দেখে মনে হচ্ছে এই কোডটি কেবলমাত্র এক-লাইনের ট্রিমের জন্য প্রযোজ্য। টেক্সট ছাঁটাই এবং উপবৃত্তগুলি দেখানোর আরও উপায় এই ওয়েবসাইটে পাওয়া যাবে: http://blog.sanuker.com/?p=631

Answer 10

উপবৃত্তের কাজ করার জন্য সিএসএসে নিম্নলিখিত লাইনগুলি যুক্ত করুন

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

Answer 11

আমাদের মধ্যে যারা স্থির প্রস্থ ব্যবহার করতে চান না তাদের জন্যও এটি ব্যবহার করে কাজ করে display: inline-grid। সুতরাং প্রয়োজনীয় বৈশিষ্ট্য সহ আপনি কেবল যুক্ত করুনdisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}