কিভাবে CSS এ একটি নতুন লাইনে টেক্সট মোড়ানো যায়

লম্বা লেখাগুলো ওয়েব ডিজাইনের সময় অনিয়ন্ত্রিত হতে পারে। কিন্তু সেগুলিও অনিবার্য হতে পারে এবং কখনও কখনও তারা সীমান্ত অতিক্রম করে। এটি একটি অপ্রয়োজনীয় ওভারফ্লো সহ একটি আলগা ডকুমেন্ট অবজেক্ট মডেল (DOM) তৈরি করতে পারে যা ব্যবহারকারী বান্ধব নয়।

কিন্তু এখানে একটি সুসংবাদ: আপনি এই ধরনের দীর্ঘ পাঠ্যগুলি সিএসএস ব্যবহার করে একটি নতুন লাইনে মোড়ানোর মাধ্যমে মোকাবেলা করতে পারেন। এখানে আমরা আপনাকে দেখাবো কিভাবে সিএসএস দিয়ে দীর্ঘ, অখণ্ড লেখাগুলি মোড়ানো যায়।

কিভাবে CSS টেক্সট মোড়ানো কাজ করে

সিএসএস ইনবিল্ট ব্যবহার করে প্রসারিত দীর্ঘ শব্দগুলি পরিচালনা করে শব্দ মোড়ানো অথবা ওভারফ্লো-মোড়ানো সম্পত্তি

অ্যাপ যা ছবিগুলিকে পেইন্টিংয়ের মতো করে তোলে

যাইহোক, যখন নিয়ন্ত্রিত হয় না, ব্রাউজারগুলি ডিফল্টভাবে এই ধরনের দীর্ঘ পাঠ্য পরিচালনা করে। তারা দীর্ঘ শব্দ মোড়ানো করবে না যতক্ষণ না তারা এটি করার নির্দেশনা পায়।

সম্পর্কিত: DOM সম্পর্কে আপনার যা জানা দরকার

পূর্বে উল্লিখিত দুটি প্রধান CSS বৈশিষ্ট্য একই ভাবে কাজ করে এবং আপনি সেগুলো বিনিময়যোগ্যভাবে ব্যবহার করতে পারেন। যাইহোক, তারা চারটি মান বা বাক্য গঠন গ্রহণ করে:

বিরতি শব্দ : এটি আসল সিএসএস সিনট্যাক্স যা ব্রাউজারকে একটি দীর্ঘ পাঠ্যকে একটি নতুন লাইনে মোড়ানো বলে।
স্বাভাবিক : এটি একটি DOM এর মধ্যে পৃথকীকরণের স্বাভাবিক বিন্দুতে প্রতিটি শব্দ ভেঙে দেয়। এটি দীর্ঘ স্ট্রিং উপর প্রভাব নেই।
প্রাথমিক : এটি স্ট্রিংগুলি পরিচালনা করার ডিফল্ট ব্রাউজারের উপায়। মত স্বাভাবিক সিনট্যাক্স, এটি দীর্ঘ শব্দ ভাঙে না।
উত্তরাধিকার : এটি শিশু উপাদানকে তার পিতামাতার সম্পত্তির উত্তরাধিকারী হতে বলে। কিন্তু এটি এখনও দীর্ঘ পাঠ্যগুলির সাথে কাজ করে না, যদি আপনি আবেদন করেন বিরতি শব্দ মূল উপাদানকে।

কিভাবে CSS ওয়ার্ড মোড়ানো ব্যবহার করে দীর্ঘ শব্দ মোড়ানো যায়

সিএসএস দিয়ে একটি নতুন লাইনে শব্দ মোড়ানো সহজ এবং কাজ করার জন্য কষ্টকর সিএসএস টুইকের প্রয়োজন হয় না।

উদাহরণস্বরূপ, দীর্ঘ h2 নীচের নমুনা চিত্রের পাঠ্য পাত্রে থাকা পাঠ্য সীমানা রেখা অতিক্রম করে:

আসুন দেখি কিভাবে আমরা এটি ব্যবহার করে পরবর্তী লাইনে মোড়ানো যায় শব্দ মোড়ানো CSS সম্পত্তি:

এইচটিএমএল :

  
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

সিএসএস :

.wrap-it{  
word-wrap: break-word;  
}

লম্বা মোড়ানোর পর h2 নমুনা ছবিতে পাঠ্য, এখানে আউটপুট আছে:

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

শব্দে একটি উল্লম্ব লাইন সন্নিবেশ করান

সম্পর্কিত: কিভাবে CSS নির্বাচক ব্যবহার করে একটি ওয়েব পেজের অংশকে টার্গেট করা যায়

যাইহোক, আগেই বলা হয়েছে, শব্দ মোড়ানো এবং ওভারফ্লো-মোড়ানো একই ভাবে কাজ করুন এবং অনুরূপ বৈশিষ্ট্য গ্রহণ করুন।

ব্যবহার করা ওভারফ্লো-মোড়ানো পরিবর্তে, শুধু প্রতিস্থাপন শব্দ মোড়ানো এর সাথে.

একটি ওয়েব পেজে শব্দ মোড়ানো গুরুত্বপূর্ণ

আপনার ওয়েবপেজে আরো নান্দনিকতা যোগ করার পাশাপাশি, লেখা মোড়ানো DOM কে কম্প্যাক্ট করে। এমনকি যদি আপনি আপনার বিষয়বস্তু বিভাগে যা যায় তা নিয়ন্ত্রণ করেন, ব্যবহারকারীরা লিঙ্ক বা অন্যান্য শব্দ পোস্ট করতে পারেন যা আপনার পাঠ্য পাত্রে বা আপনার পুরো DOM- এর সাথে খাপ খায় না।

অতএব, DOM অক্ষুন্ন রাখার জন্য এই ধরনের একটি বিভাগে পাঠ্য মোড়ক প্রয়োগ করা প্রয়োজন।

কিভাবে লিখিত সুরক্ষিত ইউএসবি ঠিক করবেন

শেয়ার করুন শেয়ার করুন টুইট ইমেইল প্রতিক্রিয়াশীল ওয়েবসাইট তৈরির জন্য এইচটিএমএল এবং সিএসএস -এ মিডিয়া প্রশ্নগুলি কীভাবে ব্যবহার করবেন

মোবাইল ডিভাইসে আপনার ওয়েবসাইটকে আশ্চর্যজনক করে তুলতে চান? সিএসএস -এ মিডিয়া প্রশ্নগুলি কীভাবে ব্যবহার করতে হয় তা শেখার সময় এসেছে।

পরবর্তী পড়ুন সম্পর্কিত বিষয়

প্রোগ্রামিং
সিএসএস
ডকুমেন্ট অবজেক্ট মডেল

লেখক সম্পর্কে ইডিসু ওমিসোলা(94 নিবন্ধ প্রকাশিত)

আইডোউ স্মার্ট প্রযুক্তি এবং উত্পাদনশীলতা সম্পর্কে উত্সাহী। তার অবসর সময়ে, তিনি বিরক্তিকর যখন কোডিং এবং দাবা বোর্ডে স্যুইচ করে ঘুরে বেড়ান, কিন্তু তিনি রুটিন থেকে বিরতি নিতে পছন্দ করেন। মানুষকে আধুনিক প্রযুক্তির কাছাকাছি পথ দেখানোর জন্য তার আবেগ তাকে আরও লেখার জন্য অনুপ্রাণিত করে।

Idowu Omisola থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন