স্প্যান উপাদানগুলির লাইন-বিরতি রোধ করুন

Question

আমার একটি <span>উপাদান রয়েছে যা আমি কোনও লাইন ব্রেক ছাড়াই প্রদর্শন করতে চাই। আমি এটা কিভাবে করবো?

Comments

আপনি তাদের দমন করতে খুঁজছেন, খুঁজে বার করো stackoverflow.com/questions/425274/...

— amwinter

Answer 1

এটি আপনার সিএসএসে রাখুন:

white-space:nowrap;

এখানে আরও তথ্য পান: http://www.w3.org/wiki/CSS/Properties/ white-space

white-space

white-spaceসম্পত্তি কিভাবে উপাদান ভিতরে সাদা স্থান পরিচালিত হয় ঘোষণা করে।

মানগুলি

normal এই মানটি ব্যবহারকারী এজেন্টদের সাদা স্থানের ক্রমগুলি ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে লাইন বক্সগুলিতে পূরণ করার জন্য লাইনগুলিকে নির্দেশ দেয়।

pre এই মানটি ব্যবহারকারীর এজেন্টদের সাদা স্থানের ক্রমগুলি ভেঙে ফেলা থেকে বাধা দেয়। উত্সের নতুনলাইনগুলিতে বা উত্পন্ন সামগ্রীতে "\ এ" এর উপস্থিতিতে লাইনগুলি কেবল ভাঙা হয়।

nowrap এই মানটি 'স্বাভাবিক' হিসাবে সাদা স্থানটি ধসে পড়ে, তবে পাঠ্যের মধ্যে লাইন ব্রেকগুলি দমন করে।

pre-wrap এই মানটি ব্যবহারকারীর এজেন্টদের সাদা স্থানের ক্রমগুলি ভেঙে ফেলা থেকে বাধা দেয়। উত্সের নিউলাইনগুলিতে, উত্পন্ন সামগ্রীতে "\ এ" এর উপস্থিতিগুলিতে এবং লাইন বাক্সগুলি পূরণ করার জন্য প্রয়োজনীয় লাইনগুলি ভাঙা হয়।

pre-line এই মানটি ব্যবহারকারী এজেন্টদের সাদা স্থানের ক্রমগুলি ধসের নির্দেশ দেয়। উত্সের নিউলাইনগুলিতে, উত্পন্ন সামগ্রীতে "\ এ" এর উপস্থিতিগুলিতে এবং লাইন বাক্সগুলি পূরণ করার জন্য প্রয়োজনীয় লাইনগুলি ভাঙা হয়।

inherit উপাদানটির পিতামাতার সম্পত্তি হিসাবে একই নির্দিষ্ট মানটি নিয়ে যায়।

Comments

আরও কিছু ডকুমেন্টেশন এখানে যুক্ত করতে খুব ভাল: w3.org/wiki/CSS/Pererties/ white

— Justus

যদি আপনার ডিভের ভিতরে অনেকগুলি স্প্যান থাকে এবং আপনি একক লাইন স্প্যান অর্জন করতে চান তবে একক লাইন ডিভটি করতে চান না তবে আপনাকে স্প্যানটিও যুক্ত করতে হবে: ইনলাইন-ব্লক; আশা করি এটি কারওর জন্য সহায়তা করবে।

— ওয়ালভ

Answer 2

আপনার যদি কেবলমাত্র স্পেস অক্ষরগুলিতে লাইন ব্রেকগুলি রোধ করতে হবে তবে আপনি  শব্দের মধ্যে সত্তা ব্যবহার করতে পারেন :

No line break

পরিবর্তে

<span style="white-space:nowrap">No line break</span>

Answer 3

white-space: nowrapসঠিক সমাধান তবে এটি একটি লাইনে কোনও বিরতি রোধ করবে। আপনি যদি কেবল দুটি উপাদানের মধ্যে লাইন বিরতি রোধ করতে চান তবে এটি কিছুটা জটিল হয়ে উঠবে:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

স্প্যানগুলির মধ্যে বিরতি রোধ করার জন্য "" কিছু "এবং" পাঠ্য "এর মধ্যে বিরতিগুলি করার মাধ্যমে এটি করা যেতে পারে:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

এটি ফায়ারফক্সের পক্ষে যথেষ্ট ভাল। ক্রোমে আপনাকে অতিরিক্তভাবে একটি স্প্যানের মধ্যে শ্বেত স্থানটি প্রতিস্থাপন করতে হবে  । (সাদা স্থান সরিয়ে ফেলা কার্যকর হয় না))

Answer 4

বুটস্ট্র্যাপ 4 ক্লাস সহ:

text-nowrap

রেফ: https://getbootstrap.com/docs/4.0/utilities/text/#text- র্যাপিং- এবং- ওভারফ্লো