একটি ওয়েব ডিজাইনের জন্য আমাকে সম্প্রতি দেওয়া হয়েছিল আমাকে একটি নির্দিষ্ট চেনাশোনা ইস্যুতে কেন্দ্রিক এবং অজানা পরিমাণ পাঠ্য সমাধান করতে হয়েছিল এবং আমি ভেবেছিলাম যে আমি বৃত্ত / পাঠ্য সংযুক্তিতে সন্ধানকারী অন্যান্য ব্যক্তির জন্য সমাধানটি এখানে ভাগ করব।
আমার মূল সমস্যাটি ছিল পাঠ্যটি প্রায়শই বৃত্তের সীমা ভেঙে দেয়। এটি সমাধান করতে আমি 4 ডিভ ব্যবহার করে শেষ করেছি। একটি আয়তক্ষেত্রাকার ধারক যা বৃত্তের সর্বাধিক (স্থির) সীমানা নির্দিষ্ট করে। এর ভিতরে ডিভ থাকবে যা এর প্রস্থ এবং উচ্চতাটি 100% এ সেট করে এমনভাবে বৃত্তটি আঁকবে তাই পিতামাতার আকার পরিবর্তন করে প্রকৃত বৃত্তের আকার পরিবর্তন করে। এর অভ্যন্তরে আরেকটি আয়তক্ষেত্রাকার ডিভ থাকবে যা% 's ব্যবহার করে একটি পাঠ্য সীমানা তৈরি করবে যা কোনও পাঠ্যকে বৃত্ত ছাড়তে বাধা দেয় (বেশিরভাগ অংশে) তারপরে অবশেষে পাঠ্যটির জন্য আসল ডিভ এবং উল্লম্ব কেন্দ্রীকরণ হবে।
এটি কোড হিসাবে আরও বোধ করে:
/* Main Container - this controls the size of the circle */
.circle_container
{
width : 128px;
height : 128px;
margin : 0;
padding : 0;
/* border : 1px solid red; */
}
/* Circle Main draws the actual circle */
.circle_main
{
width : 100%;
height : 100%;
border-radius : 50%;
border : 2px solid black; /* can alter thickness and colour of circle on this line */
margin : 0;
padding : 0;
}
/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
/* area constraints */
width : 70%;
height : 70%;
max-width : 70%;
max-height : 70%;
margin : 0;
padding : 0;
/* some position nudging to center the text area */
position : relative;
left : 15%;
top : 15%;
/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
transform-style : preserve-3d;
/*border : 1px solid green;*/
}
/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
/* change font/size/etc here */
font: 11px "Tahoma", Arial, Serif;
text-align : center;
/* vertical centering technique */
position : relative;
top : 50%;
transform : translateY(-50%);
}
<div class="circle_container">
<div class="circle_main">
<div class="circle_text_container">
<div class = "circle_text">
Here is an example of some text in my circle.
</div>
</div>
</div>
</div>
এটি কীভাবে সংকুচিত হয় তা দেখতে আপনি ধারক ডিভের সীমানা রঙগুলি অস্বচ্ছন্দ করতে পারেন।
সচেতন হওয়ার মতো বিষয়গুলি: আপনি যদি খুব বেশি পাঠ্য রাখেন বা শব্দগুলি / অবিচ্ছিন্ন পাঠ্যটি খুব দীর্ঘ ব্যবহার করেন তবে আপনি বৃত্তের সীমাটি ভেঙে ফেলতে পারেন। এটি এখনও সম্পূর্ণ অজানা পাঠ্যের জন্য উপযুক্ত নয় (যেমন ব্যবহারকারীর ইনপুট) তবে আপনি সবচেয়ে ভাল কাজ করেন যখন আপনি অস্পষ্টভাবে জানেন যে আপনার সর্বাধিক পরিমাণ টেক্সট কী সংরক্ষণ করতে হবে এবং সেই অনুসারে আপনার বৃত্তের আকার এবং ফন্টের আকার নির্ধারণ করবেন। যে কোনও ওভারফ্লো অবশ্যই অবশ্যই আড়াল করার জন্য আপনি পাঠ্য ধারক ডিভি সেট করতে পারেন তবে এটি কেবল "ভাঙ্গা" দেখতে পারে এবং আপনার নকশায় সর্বোচ্চ আকারের জন্য সঠিকভাবে অ্যাকাউন্টিংয়ের কোনও প্রতিস্থাপন নয়।
আশা করি এটি কারও কাজে লাগবে! এইচটিএমএল / সিএসএস আমার মূল শৃঙ্খলা নয় তাই আমি নিশ্চিত যে এটি আরও উন্নত হতে পারে!
