সিএসএস(৩) text-overflow প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| text-overflow | ৪.০ | ৬.০ | ৭.০ | ৩.১ | ১১.০ ৯.০ -o- |
সংজ্ঞা ও ব্যবহার
text-overflow প্রোপার্টি যেসকল ওভারফ্লো হওয়া কন্টেন্ট প্রদর্শন হয়নি সেগুলো ইউজার কিভাবে বুঝবে তা নির্দেশ করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| clip | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
text-overflow: clip/ellipsis/string/initial/inherit;
text-overflow প্রোপার্টির ব্যবহারঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
</style>
</head>
<body>
<p> নিচে দুইটি ডিভ দেওয়া হলো, এই ডিভের মধ্যে টেক্সট গুলো সম্পূর্ণ থাকবে না। টেক্সট গুলো ক্লিপ করবে। </p>
<p>এই ডিভ-এ "text-overflow:clip" ব্যবহার করা হয়েছেঃ </p>
<div id="div1"> এটা হলো বড় টেক্সট যা বক্স এর মধ্যে সম্পূর্ণ থাকবেনা। </div>
<p> এই ডিভ-এ "text-overflow:ellipsis" ব্যবহার করা হয়েছেঃ </p>
<div id="div2"> এটা হলো বড় টেক্সট যা বক্স এর মধ্যে সম্পূর্ণ থাকবেনা। </div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object. style.textOverflow="ellipsis"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
#myDIV {
border: 1px solid black;
background-color: lightblue;
width: 175px;
white-space: nowrap;
overflow: hidden;
text-overflow: visible;
}
</style>
</head>
<body>
<p>ডিভ এলিমেন্টের "উদাহরণ দেখুন" বাটনে ক্লিক করলে text-overflow প্রোপার্টি পরিবর্তন হবেঃ </p>
<button onclick="myFunction()">উদাহরণ দেখুন</button>
<div id="myDIV">
চাঁদপুর হলো ইলিশের শহর। চাঁদপুর পদ্মা, মেঘনা ও ডাকাতিয়া এই তিনটি নদীর মিলনস্থল।চাঁদপুরে অসংখ্য শিক্ষা প্রতিষ্ঠান আছে।
চাঁদপুরে একটি স্টেডিয়াম আছে। চাঁদপুরে অনেক গুলো নির্দশণের মধ্যে রক্তধারা একটি। চাঁদপুরে একটি শিল্পকলা একাডেমি রয়েছে।
আর এই চাঁদপুরেই আমাদের স্যাট একাডেমির সূচনা। স্যাট একাডেমি সম্পূর্ণ ফ্রি আইটি শিক্ষা প্রতিষ্ঠান।
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.textOverflow = "ellipsis";
}
</script>
</body>
</body>
</html>
ফলাফল
text-overflow প্রোপার্টির ভ্যালু-সমূহ
- clip - ডিফল্ট ভ্যালু clips লেখা ।
- ellipsis - একটি উপবৃত্ত রেন্ডার ("...")clips লেখাকে নির্দেশ করে।
- string - প্রদত্ত স্ট্রিং রেন্ডার ক্লিপস লেখাকে নির্দেশ করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
text-overflow প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।