কিভাবে নির্দিষ্ট প্রস্থ সহ এইচটিএমএল বোতামের পাঠ্য মোড়ানো যায়?

Question

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

কোনও টেবিলসেলের মতো স্থির প্রস্থের মোড়ক দিয়ে আমি কীভাবে এইচটিএমএল বোতামের পাঠ্যটি তৈরি করতে পারি?

<td class="category_column">
  <input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" value="Roos Sturingen / Sensors" id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" class="outset" style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;"
  />
</td>

সিএসএস ক্লাস সীমানা যুক্ত করা এবং প্যাডিং সংশোধন করা ছাড়া কিছুই করে না। আমি যদি word-wrap:break-wordএই বোতামটিতে যুক্ত করি তবে এটি এটির মতো এটি আবৃত করবে:

Roos Sturingen / Sen
sors

এবং আমি চাই না এটি যদি কোনও শব্দের মাঝে কাটা সম্ভব হয় তবে এটি যদি শব্দের মধ্যেই কেটে ফেলা সম্ভব হয়।

Answer 1

আমি দেখতে পেয়েছি যে আপনি সাদা স্পেস সিএসএস বৈশিষ্ট্যটি ব্যবহার করতে পারেন:

white-space: normal;

এবং এটি শব্দটিকে স্বাভাবিক পাঠ্য হিসাবে ভেঙে দেবে।

Comments

@ এমজিও এখন ঠিক আছে - এরই মধ্যে আমরা আইআই 6 কে মেরে ফেলেছি।

— low_rents

প্রস্তাবিত অন্যান্য উত্তরগুলি word-wrap: break-word;আমার পক্ষে কাজ করে নি, তবে এটি হয়েছে।

— এফ

Answer 2

white-space: normal;
word-wrap: break-word;

আমার দু'জনের সাথেই কাজ করে

Answer 3

এইচটিএমএল উত্সে লাইন ব্রেক সন্নিবেশ করে আপনি এটি (ব্রাউজারের অনুমতি দেওয়া, আমি কল্পনা) জোর করতে পারেন:

<INPUT value="Line 1
Line 2">

অবশ্যই লাইন বিরতি কোথায় রাখবেন তা নিয়ে কাজ করা তুচ্ছ নয় ...

আপনি যদি এটির <BUTTON>পরিবর্তে কোনও এইচটিএমএল ব্যবহার করতে পারেন <INPUT>, যেমন বোতামের লেবেলটি তার valueবৈশিষ্ট্যের চেয়ে উপাদানটির বিষয়বস্তু হিসাবে বাটনটির চেয়ে কিছু পিক্সেল সংকীর্ণ <SPAN>একটি widthবৈশিষ্ট্যের সাথে সেই সামগ্রীটিকে একটি ভিতরে রেখে দেয় (এমনকি এটিও কৌশলটি করতে পারে বলে মনে হয়) আই 6 :-) এ।

Comments

খুব সাধারণ কোনও কিছুর জন্য আপনি পছন্দসই বিরতিতে একটি বোতামের সাথে <বাটন> ব্যবহার করতে পারেন।

— কেভিন এইচ

কাজ করতে ব্যবহৃত হয়, তবে ক্রোমের সাম্প্রতিক সংস্করণগুলিতে আর কাজ করে না।

— জো মাবেল

Answer 4

আমি দেখতে পেয়েছি যে একটি বোতাম কাজ করে তবে style="height: 100%;"আপনি বোতামটি যুক্ত করতে চাইবেন যাতে এটি আইফোন আইওএস 5.1.1 এর জন্য সাফারিতে প্রথম লাইনের চেয়ে আরও বেশি দেখায়

Answer 5

   white-space: normal;
   word-wrap: break-word;

"দুজন" আমার পক্ষে কাজ করেছেন।

Answer 6

এর মতো মাল্টি-লাইন বোতামগুলি বাস্তবায়নের পক্ষে আসলে তুচ্ছ নয়। এই পৃষ্ঠায় এই বিষয়ে একটি আকর্ষণীয় (যদিও কিছুটা তারিখের) আলোচনা রয়েছে। আপনার সেরা বাজি সম্ভবত হয় মাল্টি-লাইন প্রয়োজনীয়তা হ্রাস করা বা যেমন একটি divগুলি এবং সিএসএস ব্যবহার করে একটি কাস্টম বোতাম তৈরি করা এবং এটি একটি বোতাম হিসাবে কাজ করার জন্য কিছু জাভাস্ক্রিপ্ট যুক্ত করা।

Comments

সমস্যাটি হ'ল আমি কমান্ডনাম এবং কমান্ডআরগমেন্ট বৈশিষ্ট্য সহ এসপি: বোতাম নিয়ন্ত্রণ ব্যবহার করে এএসপি.নেট ব্যবহার করছি। আমি কেবল অন্য একটি নিয়ন্ত্রণ ব্যবহার করতে পারি না।

— পিটার

Answer 7

আমাদের যদি <button>ট্যাগের অভ্যন্তরে কিছু অভ্যন্তরীণ বিভাগ থাকে তবে-

<button class="top-container">
    <div class="classA">
       <div class="classB">
           puts " some text to get print." 
       </div>
     </div>
     <div class="class1">
       <div class="class2">
           puts " some text to get print." 
       </div>
     </div>
</button>

ক্লাস এ এর ​​কিছু সময় পাঠ্য 1 ক্লাস 1 ডেটাতে ওভারল্যাপ হয়ে যায় কারণ এই দুটিই একক বোতাম ট্যাগে রয়েছে। আমি টেক্সটটি ব্যবহার করে ভাঙার চেষ্টা করি-

 word-wrap: break-word;         /* All browsers since IE 5.5+ */
 overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */ 

তবে এটি কাজ করে না তবে আমি এটি চেষ্টা করে-

white-space: normal;

উপরের সিএসএস বৈশিষ্ট্যগুলি সরানোর পরে এবং আমার কাজটি সম্পন্ন করে।

আশা করি সবার জন্য কাজ করবে !!!

Comments

এই উত্তর থেকে এটি কীভাবে আলাদা ?

— ক্রিশ্চিয়ান গোলহার্ড্ট

এটি যদি আপনি খেয়াল করেন তবে আমি এটি বোতাম ট্যাগ সহ ব্যবহার করেছি।

— এস। যাদব

একটি বোতামের মধ্যে ডিভগুলি অনুমোদিত নয়, এটি সঠিক এইচটিএমএল নয়।

— ইয়ান ডেভলিন

Answer 8

word-wrap: break-word;

আমার জন্য কাজ।