text-overflow বৈশিষ্ট্য

text-overflow বৈশিষ্ট্যটি কর্তিত পাঠ্যের শেষে একটি এলিপসিস যোগ করে এই সংকেত দিতে যে পাঠ্যটি ব্লকের মধ্যে fits হয়নি এবং কর্তন করা হয়েছে।

বৈশিষ্ট্যটি কাজ করার জন্য পাঠ্যকে overflow বৈশিষ্ট্য বা overflow-x বৈশিষ্ট্যের hidden, auto বা scroll মান দিয়ে কর্তন করতে হবে। যদি visible সেট করা থাকে (যা ডিফল্টভাবে থাকে) - তাহলে text-overflow কাজ করবে না।

সিনট্যাক্স

cssসিলেক্টর {
  text-overflow: ellipsis | clip;
}

মানসমূহ

ডিফল্ট মান: clip।

উদাহরণ . ওভারফ্লো করা পাঠ্য

এই উদাহরণে, একটি খুব দীর্ঘ শব্দ কন্টেইনারের মধ্যে fit হবে না এবং এর সীমানা অতিক্রম করে বেরিয়ে যাবে। কোন কর্তন ঘটে না:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: visible;
  border: 1px solid red;
}

Результат:

উদাহরণ . overflow বৈশিষ্ট্য যোগ করা যাক

এখন, কন্টেইনারের সীমানা অতিক্রম করে যাওয়া সবকিছু, শুধু কর্তিত হয়ে যাবে:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
}

Результат:

উদাহরণ . ellipsis মান

এখন overflow বৈশিষ্ট্যের পাশাপাশি আমরা text-overflow বৈশিষ্ট্যটি ellipsis মান দিয়ে যোগ করব। কর্তিত পাঠ্যের শেষে একটি এলিপসিস যোগ করা হবে:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

উদাহরণ . স্ক্রলবার সহ

যদি overflow: auto এবং text-overflow: ellipsis সেট করা হয়, তাহলে একটি স্ক্রলবার উপস্থিত হবে, তবুও এলিপসিসটি এখনও যোগ করা হবে। উদাহরণে স্ক্রলবারটি স্ক্রল করে দেখুন:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

উদাহরণ . যদি খুব দীর্ঘ শব্দ না থাকে

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

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

উদাহরণ . এক লাইনের পাঠ্য

যাইহোক, এমন পরিস্থিতি রয়েছে যখন আমরা চাই যে পাঠ্যটি কর্তিত হোক, যদি এটি খুব দীর্ঘ হয় (সামগ্রিক পাঠ্য, আলাদা শব্দ নয়) এবং পরের লাইনে স্থানান্তরিত না হয়। এটি white-space বৈশিষ্ট্য nowrap মান দিয়ে যোগ করে করা হয়, যা পাঠ্যকে অন্য লাইনে স্থানান্তর করতে নিষেধ করে। উদাহরণটি দেখুন, এখন পাঠ্য কর্তিত হচ্ছে:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

উদাহরণ . শতকরা হিসাবে প্রস্থ

যদি ব্লকের প্রস্থ % এ সেট করা হয়, তাহলে কর্তন সঠিকভাবে কাজ করবে:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

আরও দেখুন