ডিভের ভিতরে ক্রপ পাঠ্য খুব দীর্ঘ

Question 1

<div style="display:inline-block;width:100px;">

very long text
</div>

পরের নতুন লাইনে প্রদর্শিত না করে কেবলমাত্র দীর্ঘ সারণীটি কাটাতে খাঁটি সিএসএস ব্যবহারের যে কোনও উপায় এবং কেবল সর্বোচ্চ 100px দেখায়

Question 2

<div class="crop">longlong longlong longlong longlong longlong longlong </div>

এটি ভাবতে পারি এমন একটি সম্ভাব্য পন্থা

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}

এই পদ্ধতি দীর্ঘ টেক্সট এখনো মোড়ানো হবে কিন্তু দৃশ্যমান কারণে হবে না overflowসেট, এবং সেটিং দ্বারা line-heightএকই হিসাবে heightআমরা নিশ্চিত শুধুমাত্র এক লাইন কি কখনো প্রদর্শন করা হবে তৈরি করছেন।

ডেমোটি এখানে দেখুন এবং ইন্টারেক্টিভ উদাহরণগুলির সাথে দুর্দান্ত ওভারফ্লো সম্পত্তি সম্পর্কিত বর্ণনা।

Question 3

তুমি ব্যবহার করতে পার:

overflow:hidden;

জোনের বাইরে পাঠ্যটি আড়াল করতে।

মনে রাখবেন এটি শেষ অক্ষরটি কেটে ফেলতে পারে (সুতরাং শেষ চিঠির একটি অংশ এখনও প্রদর্শিত হবে)। একটি দুর্দান্ত উপায় হ'ল শেষে একটি উপবৃত্ত প্রদর্শন করা। আপনি এটি ব্যবহার করে এটি করতে পারেন text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

Question 4

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}

http://jsfiddle.net/hT3YA/

Question 5

আপেক্ষিক ইউনিট কেন ব্যবহার করবেন না?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Question 6

নীচের কোডটি আপনার সিদ্ধান্তের স্থির প্রস্থ সহ আপনার পাঠ্যকে আড়াল করবে। তবে প্রতিক্রিয়াশীল ডিজাইনের জন্য বেশ সঠিক নয়।

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

হালনাগাদ

আমি (মোবাইল) ডিভাইসে লক্ষ্য করেছি যে (স্থির প্রস্থের কারণে) একে অপরের সাথে পাঠ্য (মিশ্রিত) ... সুতরাং আমি উপরের কোডটি সম্পাদনা করেছি যাতে অনুসরণ করে প্রতিক্রিয়াশীলভাবে লুকানো যায়:

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

(সর্বাধিক প্রস্থ) নিশ্চিত করুন যে পাঠ্যটি (পর্দার আকার) যাই হোক না কেন প্রতিক্রিয়াযুক্তভাবে লুকানো থাকবে এবং একে অপরের সাথে মিশ্রিত হবে না।

Question 7

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="cut_text">

very long text
</div>

স্নিপেট প্রসারিত করুন