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

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

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

সিনট্যাক্স

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

মানসমূহ

মান	বর্ণনা
`ellipsis`	কর্তিত পাঠ্যের শেষে একটি এলিপসিস যোগ করে।
`clip`	কর্তিত পাঠ্যের শেষে এলিপসিস যোগ করে না (এটি ডিফল্ট মান, প্রয়োজনে বৈশিষ্ট্যের ক্রিয়া বাতিল করার জন্য প্রয়োজন)।

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

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

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

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

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

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

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

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

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

উদাহরণ . ellipsis মান

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

আরও দেখুন

word-break এবং overflow-wrap বৈশিষ্ট্য,
যা দীর্ঘ শব্দের অক্ষরগুলিকে একটি নতুন লাইনে স্থানান্তর করতে দেয়
hyphens বৈশিষ্ট্য,
যা সিলেবল দ্বারা শব্দ বিভাজন সক্ষম করে
overflow বৈশিষ্ট্য,
যা ব্লকের সীমানা অতিক্রম করে যাওয়া অংশগুলি কর্তন করে