আমি এমন কোনও সাইটে কাজ করছি যা <br>শিরোনামের মতো লাইন ব্রেকগুলি serted োকানো হয়েছে। ধরে নিচ্ছি যে আমি উত্স এইচটিএমএল সম্পাদনা করতে পারছি না, সিএসএসের সাথে কি কোনও উপায় আছে যা আমি এই বিরতিগুলি উপেক্ষা করতে পারি?
আমি মোবাইলটি সাইটটি অপ্টিমাইজ করছি যাতে আমি সত্যিই জাভাস্ক্রিপ্ট ব্যবহার করতে চাই না।
উত্তর:
সিএসএসের সাহায্যে আপনি বিআর ট্যাগগুলি "লুকিয়ে" রাখতে পারেন এবং এগুলির কোনও প্রভাব থাকবে না:
br {
display: none;
}
আপনি যদি কেবল একটি নির্দিষ্ট শিরোনামের মধ্যে কিছু গোপন করতে চান তবে আপনার সিএসএসকে আরও নির্দিষ্ট করে তুলুন।
h3 br {
display: none;
}
দ্রষ্টব্য: এই সমাধানটি কেবল ওয়েবকিট ব্রাউজারগুলির জন্যই কাজ করে, যা স্ব-সমাপ্তি ট্যাগগুলিতে ভুলভাবে সিউডো-উপাদান প্রয়োগ করে।
উপরের উত্তরের সংযোজন হিসাবে এটি লক্ষণীয় যে কিছু ক্ষেত্রে কেবল উপেক্ষা করার পরিবর্তে কোনও স্থান সন্নিবেশ করা প্রয়োজন <br>:
উদাহরণস্বরূপ উপরের উত্তরগুলি ঘুরবে
Monday<br>05 Augustপ্রতি
Monday05 Augustআমি আমার সাপ্তাহিক ইভেন্ট ক্যালেন্ডারটি ফর্ম্যাট করার চেষ্টা করার সময় যাচাই করেছিলাম। "সোমবার" এর পরে একটি স্থান সন্নিবেশ করানো পছন্দ করা হয়। সিএসএসে নিম্নলিখিতটি প্রবেশ করে সহজেই এটি করা যায়:
br {
content: ' '
}
br:after {
content: ' '
}
এটি করা হবে
Monday<br>05 Augustমত চেহারা
Monday 05 Augustআপনি পরিবর্তন করতে পারেন contentমধ্যে অ্যাট্রিবিউট br:afterকরতে ', 'আপনি কমা দ্বারা পৃথক বা আপনার পছন্দের যেকোন মধ্যে চান লাগাতে চান ' 'এটা বিভেদক করুন! যাইহোক
Monday, 05 Augustঝরঝরে দেখাচ্ছে ;-)
একটি রেফারেন্স জন্য এখানে দেখুন ।
উপরের উত্তরের মতো, আপনি যদি এটি ট্যাগ-নির্দিষ্ট করতে চান তবে আপনি পারেন। যদি আপনি ট্যাগের জন্য কাজ এই সম্পত্তি চান হিসাবে <h3>, শুধু একটি যোগ h3আগে প্রতিটি brএবং br:after, উদাহরণস্বরূপ।
এটি সিউডো-ট্যাগের জন্য সবচেয়ে বেশি কাজ করে।
<br />অন্যতম উপাদান করে একটি সিউডো-উপাদান কাজ করতে অনুমিত হয় না । এবং contentকেবল ছদ্ম-উপাদানগুলিতে কাজ করে।
আপনি স্টাইলে যোগ করুন
br{
display: none;
}
তাহলে এই কাজ করবে। যদিও এটি IE এর পুরানো সংস্করণগুলিতে কাজ করবে কিনা তা নিশ্চিত নয়।
আপনি যদি সাদা স্থান পদ্ধতিটি কাজ করতে চান তবে আপনি এর spanপরিবর্তে উপাদানগুলি ব্যবহার করতে পারেন br, কারণ এটি সিউডো-উপাদানগুলির উপর নির্ভর করে যা প্রতিস্থাপিত উপাদানগুলির জন্য "সংজ্ঞায়িত নয়"।
এইচটিএমএল
<p>
To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>
সিএসএস
span {white-space: pre;}
span:after {content: ' ';}
span.line-break {display: block;}
span.line-break:after {content: none;}
লাইন বিরতি কেবল উপযুক্ত স্প্যান উপাদানকে সেট করেই অর্জন করা যায় display:block।
আপনার এইচটিএমএল মার্কআপে আইডি এবং / অথবা ক্লাস ব্যবহার করে আপনি সহজেই সিএসএস দ্বারা প্রতিটি একক বা স্প্যান উপাদানগুলির সংমিশ্রণটিকে লক্ষ্য করতে পারেন বা সিএসএস নির্বাচক পছন্দ করতে পারেন nth-child()।
সুতরাং আপনি যেমন একটি প্রতিক্রিয়াশীল বিন্যাসের জন্য মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে বিভিন্ন ব্রেক পয়েন্টগুলি সংজ্ঞায়িত করতে পারেন।
এবং আপনি জাভাস্ক্রিপ্ট (jQuery) দ্বারা সহজেই ক্লাসগুলি যোগ / অপসারণ / টগল করতে পারেন।
এই পদ্ধতির "সুবিধা" হ'ল এটির দৃust়তা - প্রতিটি ব্রাউজারে কাজ করে যা ছদ্ম-উপাদানগুলিকে সমর্থন করে (দেখুন: আমি কি ব্যবহার করতে পারি - CSS উত্পন্ন সামগ্রী )।
বিকল্প হিসাবে সিউডো-উপাদানগুলির মাধ্যমে একটি লাইন বিরতি যুক্ত করাও সম্ভব:
span.break:before {
content: "\A";
white-space: pre;
}
<br>, কমপক্ষে ক্রস-ব্রাউজার দিয়ে নয়। তাই আমি একটি বিকল্প দেখিয়েছি।
<br> উপাদান সমস্যা (সম্ভবতঃ তাদের শূণ্যস্থান সঙ্গে প্রতিস্থাপন) solves। সুতরাং সামগ্রিকভাবে যে বিষয়টি নিয়ে সামগ্রিকভাবে উদ্বেগ রয়েছে তা হ'ল যখন কারও এইচটিএমএলটির নিয়ন্ত্রণ নেই ; অতিরিক্ত যুক্ত শর্তে জটিল যে তারা সমাধান করার জন্য জাভাস্ক্রিপ্ট (যে কারণেই হোক না কেন) ব্যবহার করতে চান না।
<br>সিএসএস দিয়ে কীভাবে উপেক্ষা করবেন?" ইতিমধ্যে উত্তর ছিল। এবং কেবলমাত্র আপনি যদি এইচটিএমএলটির নিয়ন্ত্রণে থাকেন যার অর্থ এই নয় যে আপনি এটি পরিবর্তন করতে চান। তবে প্রতিক্রিয়াশীল নকশায় প্রায়শই লাইন ব্রেক (স্বয়ংক্রিয় মোড়ানো ব্যতীত) এর নিয়ন্ত্রণে রাখা বাঞ্ছনীয়। এবং এই জাতীয় ক্ষেত্রে সাদা স্থান থাকা বা সিএসএস (মিডিয়া ক্যোয়ারী) দ্বারা নিয়ন্ত্রিত না হওয়ার পদ্ধতিটি লক্ষ্য অর্জনের জন্য কমপক্ষে "একটি পদ্ধতি"।
আমার জন্য আরও ভাল দেখাচ্ছে:
Some text, Some text, Some text
br {
display: inline;
content: '';
}
br:after {
content: ', ';
display: inline-block;
}<div style="display:block">
<span>Some text</span>
<br>
<span>Some text</span>
<br>
<span>Some text</span>
</div>তার জন্য আপনি ঠিক এটি করতে পারেন:
br{display: none;}এবং যদি এটি কিছু পিআরই ট্যাগের মধ্যে থাকে, তবে আপনি এবং যদি আপনি পিআরই ট্যাগটি নিয়মিত ব্লক উপাদানগুলির মতো আচরণ করতে চান তবে আপনি এই সিএসএস ব্যবহার করতে পারেন:
pre {white-space: normal;}অথবা আপনি অনীশ কার্তিক সি এর স্টাইলটি অনুসরণ করতে পারেন:
br {content: ' '}
br:after {content: ' '}
আমি মনে করি আপনি এটি পেয়েছেন
::beforeএবং ::afterকরছে অন্তত "প্রতিস্থাপিত উপাদান" মত জন্য "undefined" br। সুতরাং নির্ভরযোগ্য ব্রাউজারের আচরণের পক্ষে কখনও নির্ভর করা যায় না! কেবলমাত্র আপনি যা করতে পারেন তা হল এই উপাদানগুলির সাথে সিউডো উপাদানগুলি ব্যবহার না করা!
আপনার প্রশ্ন অনুসারে, অণীশ কার্তিক সি পদ্ধতির সাহায্যে ফায়ারফক্স এবং অপেরার জন্য এই সমস্যার সমাধান করতে আপনার "ফ্লোট" রাইট "বৈশিষ্ট্য যুক্ত করতে হবে।
পরীক্ষা করে দেখুন উদাহরণ এখানে। এই সিএসএস ফায়ারফক্স (26.0), অপেরা (12.15), ক্রোম (32.0.1700) এবং সাফারি (7.0) এ কাজ করে
br {
content: " ";
float:right;
}
আমি আশা করি এটি আপনার প্রশ্নের উত্তর দেবে !!
brএটিকে "নিরপেক্ষ" করা উচিত ইতিমধ্যে উত্তর দেওয়া হয়েছে (একাধিকবার)। প্রশ্নটি শর্তাধীন সাদা স্থান সম্পর্কে । এবং যেহেতু এটিতেbr ছদ্ম উপাদানগুলির ব্যবহার প্রয়োজন, এটি কাজ করে না ।
brকেবল বোকা! এবং আমি এখনও দেখতে পারি না যে আপনার বাকী উত্তরের "শর্তসাপেক্ষ সাদা স্থান এবং লাইন ব্রেকাস" এর সাথে কী সম্পর্ক আছে? আপনি আরও আরও ব্যাখ্যা করতে পারেন, দয়া করে?
brউপাদানগুলির চারপাশে আপনার স্পেস রয়েছে। আপনি যদি এগুলি সরিয়ে থাকেন তবে আপনি দেখতে পাবেন এটি কোনও স্থান যুক্ত করার জন্য কাজ করছে না।
brউপাদান রয়েছে, প্রথম এবং শেষেরটির আগে এবং পরে ফাঁকা জায়গা রয়েছে। এটি সেই জায়গাগুলিই এটি প্রকাশ করে যে আপনার সমাধানটি কাজ করছে, যখন বাস্তবে এটি হয় না। যখন আপনি এই স্পেসগুলি সরিয়ে ফেলেন, যেমনটি আমি আমার সংশোধিত উদাহরণে করেছি, আপনি দেখতে পাচ্ছেন যে আপনার সমাধানটি ফায়ারফক্সে কোনও স্থান যোগ করছে না।
এই প্রশ্নটি ইতিমধ্যে সমাধান হয়ে গেছে বলে মনে হচ্ছে, গৃহীত উত্তরগুলি ফায়ারফক্সে আমার সমস্যার সমাধান করেনি। ফায়ারফক্স (এবং সম্ভবত আই, যদিও আমি এটি চেষ্টা করে দেখিনি) "কন্টেন্ট" ট্যাগের বিষয়বস্তু পড়ার সময় হোয়াইট স্পেসগুলি এড়িয়ে যান। যদিও আমি পুরোপুরি বুঝতে পেরেছি যে মোজিলা এটি করবে কেন, এটি সমস্যার ভাগ এনে দেয়। আমি খুঁজে পাওয়া সবচেয়ে সহজ কাজটি হ'ল নীচের মতন নিয়মিত পরিবর্তে অবিচ্ছেদী জায়গা ব্যবহার করা।
.noLineBreaks br:before{
content: '\a0'
}beforeএলিমেন্ট নেই কেন br? এমনকি brআপনার এইচডিএমএল-তেও কোনও ঝাঁকুনিতে নেই। সমস্যার অংশটি হ'ল কিছু ব্রাউজারে beforeকোনও কাজ করে না br।
হ্যাঁ আপনি এড়িয়ে যেতে পারেন <br>। আপনার বিশেষত প্রতিক্রিয়াশীল ডিজাইনের ক্ষেত্রে এটির প্রয়োজন হতে পারে যেখানে আপনার মোবাইল ডিভাইসের জন্য বিরতিগুলি সরিয়ে ফেলতে হবে।
এইচটিএমএল
<h2>
Where ever you go <br class="break"> i am there.
</h2>মোবাইল উদাহরণের জন্য সিএসএস
/* Resize the browser window to check */
@media (max-width: 640px)
{
.break {display: none;}
}এই কোডেপেনটি দেখুন:
https://codepen.io/fluidbrush/pen/pojGQyM
আপনি কেবল একটি মন্তব্যে এটিকে রূপান্তর করতে পারেন ..
অথবা আপনি এটি করতে পারেন:
br {
display: none;
}তবে আপনি যদি এটি না চান তবে আপনি কেন সেখানে রাখছেন?
brউপাদানগুলির ব্যবহারের মাধ্যমে সম্ভব নয় ! কারণগুলি ইতিমধ্যে অসংখ্যবার ব্যাখ্যা করা হয়েছে! আমার উত্তরে আমি আপনাকে বৈধ, মজবুত এবং ক্রস ব্রাউজার উপায়ে লক্ষ্য অর্জনের একটি বিকল্প পদ্ধতি দেখিয়েছি।