Multiline text Ellipsis | Text truncate after 2,3,4,....n lines

 Multiline Text Ellipsis:

মাঝে মাঝে আমাদেরকে একটা কার্ডে সবগুলা টেক্সট দেখানোর দরকার পড়ে না। আমাদের এমন দরকার হতে পারে যে একটা বড় টেক্সেটের আমরা শুধু তিন লাইন অথবা চার লাইন দেখাব। তারপর বাকি টেক্সট গুলা এলিপসিস বা ট্রানকেট হয়ে যাবে। অর্থাৎ যেখান থেকে টেক্সটগুলা এলিপসিস হবে সেখানে ডট ডট ডট চিহ্ন চলে আসবে (উপরের ছবি দেখ)।

আমরা CSS এর সাহায্যে এই কাজটা খুব সহজেই করতে পারি। ধর আমাদেরকে নিচের ডিভটার ভিতর তিন লাইন দেখানোর পর টেক্সট এলিপসিস করতে চাইঃ

<div className = 'example'>

    Lorem ipsum dolor sit amet, consectetur adipisicing

    elit. Ratione minus ullam provident sed nemo nostrum,

    iste voluptas totam? Repudiandae alias ab, iusto

    architecto necessitatibus, labore nostrum earum

    doloribus voluptate soluta nihil possimus eos consequatur

    provident non fugiat assumenda magni distinctio?

</div>

একন এই টেক্সটগুলাকে ৩ লাইনের পর এলিপসিস করতে চাইলে আমরা নিচের CSS file টা লেখবঃ

.example {

  display: -webkit-box;

  max-width: 200px;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

এইটা করার পর ব্রাউজারে নিচের মত আউটপুট দেখাবেঃ

Lorem ipsum dolor sit amet, consectetur adipisicing

elit. Ratione minus ullam provident sed nemo nostrum,

iste voluptas totam? Repudiandae alias ab, iusto....