`text-overflow` প্রোপার্টি ব্যবহার করে ওভারফ্লো হওয়া টেক্সট কিভাবে দেখানো হবে (ক্লিপ বা এলিপসিস) তা নির্ধারণ করা যায়।
উদাহরণ: টেক্সট ওভারফ্লো হ্যান্ডলিং
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div {
white-space: nowrap; width: 100px; overflow: hidden;
border: 1px solid #3008c0; margin: 10px; padding: 10px;
}
.clip { text-overflow: clip; }
.ellipsis { text-overflow: ellipsis; }
</style>
</head>
<body>
<h1>টেক্সট ওভারফ্লো হ্যান্ডলিং উদাহরণ</h1>
CLIP: <div class="clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.</div>
ELLIPSES: <div class="ellipsis">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.</div>
</body>
</html>
কোড ব্যাখ্যা
- white-space: nowrap: টেক্সট এক লাইনে থাকবে।
- overflow: hidden: কন্টেইনারের বাইরের অংশ লুকাবে।
- text-overflow: clip: কাটে দেবে (ডিফল্ট)।
- text-overflow: ellipsis: ... (তিন ডট) দেখাবে।
মাল্টি-লাইন এলিপসিস
`-webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical;` ব্যবহার করে ৩ লাইনের পর এলিপসিস দেওয়া যায় (WebKit-only)।
