আউটপুট:
হ্যালো আপনি কেমন আছেন
কোড:
<p>hello <br> How are you </p>কীভাবে একই আউটপুট অর্জন করবেন <br>?
আউটপুট:
হ্যালো আপনি কেমন আছেন
কোড:
<p>hello <br> How are you </p>কীভাবে একই আউটপুট অর্জন করবেন <br>?
উত্তর:
একই এইচটিএমএল গঠন অসম্ভব, আপনি মধ্যে পার্থক্য কিছু থাকতে হবে Helloএবং How are you।
আমি এর ব্যবহারের পরামর্শ দিচ্ছি spanযা আপনি তারপরে ব্লক হিসাবে প্রদর্শিত হবে (ঠিক যেমন একটি <div>বাস্তবের মতো )।
<br>সঠিক মার্কআপ হয় তার জন্য প্রচলিত উদাহরণ । একটি কবিতার স্প্যানস "ভুল" হবে।
আপনি white-space: pre;উপাদানগুলিকে <pre>এমনভাবে তৈরি করতে ব্যবহার করতে পারেন যা নিউলাইনগুলি সংরক্ষণ করে। উদাহরণ:
আইই এর জন্য দ্রষ্টব্য যে এটি কেবল আই 88 + এ কাজ করে।
preহয় pre-line, যা মোড়ানো পারেন।
white-spaceCSS নিয়মকে ট্রিগার করবে না ।
<br/>সাধারণ হিসাবে ব্যবহার করুন , তবে display: noneযখন আপনি এটি চান না তখন এটি আড়াল করুন ।আমি প্রত্যাশা করব যে এই প্রশ্নটি সন্ধানকারী বেশিরভাগ লোক নির্দিষ্ট জায়গায় লাইন-ব্রেকটি উপস্থিত রয়েছে কিনা তা নির্ধারণ করার জন্য CSS / প্রতিক্রিয়াশীল নকশা ব্যবহার করতে চায়। (এবং এর বিরুদ্ধে ব্যক্তিগত কিছু নেই <br/>)
যদিও অবিলম্বে সুস্পষ্ট না, আপনি আসলে আবেদন করতে পারেন display:noneএকটি থেকে <br/>তা আড়াল করার ট্যাগ, যা শব্দার্থিক বিআর ট্যাগ টমটম মিডিয়া প্রশ্নের ব্যবহার সক্ষম করে।
<div>
The quick brown fox<br />
jumps over the lazy dog
</div>
@media screen and (min-width: 20em)
{
br
{
display: none; // hide the BR tag for wider screens (i.e. disable the line break)
}
}এটি প্রতিক্রিয়াশীল নকশায় কার্যকর যেখানে আপনাকে একটি বিরতিতে দুটি লাইনে পাঠ্য জোর করতে হবে।
display: noneসমাধানটি এখন পর্যন্ত সবচেয়ে উপযুক্ত এবং দরকারী।
display: inline-block; width: 1em;পরিবর্তে এর মতো কিছু ব্যবহার করতে পারেন none।
<br class='foo'>আপনার আরও নিয়ন্ত্রণের প্রয়োজন থাকলে আপনি এমনকি ক্লাস প্রয়োগ করতে পারেন তবে খুব বেশি পাগল হয়ে যাবেন না!
<br/>এটি যা করে তাতে দুর্দান্ত; চাকা পুনর্নবীকরণের প্রয়োজন নেই। ধন্যবাদ!
সাদা জায়গাগুলি এবং লাইন ব্রেকগুলি পরিচালনা করার জন্য বিভিন্ন বিকল্প রয়েছে। যদি কোনও বিষয়বস্তু যেমন একটি <p>ট্যাগ রাখতে পারেন তবে যেটি যা চান তা পাওয়া সহজ।
লাইন ব্রেকগুলি সংরক্ষণ করার জন্য তবে সাদা স্পেসpre-line নয় এর preমতো ব্যবহার করুন :
<style>
p {
white-space: pre-line; /* collapse WS, preserve LB */
}
</style>
<p>hello
How are you</p>যদি অন্য কোনও আচরণের প্রয়োজন হয় তবে এর মধ্যে একটির মধ্যে চয়ন করুন (ডাব্লুএস = হোয়াইটস্পেস, এলবি = লাইনব্রেক):
white-space: normal; /* collapse WS, wrap as necessary, collapse LB */
white-space: nowrap; /* collapse WS, no wrapping, collapse LB */
white-space: pre; /* preserve WS, no wrapping, preserve LB */
white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
white-space: inherit; /* all as parent element */সিএসএসে "\ a" কমান্ড একটি ক্যারিজ রিটার্ন উত্পন্ন করে। এটি সিএসএস, এইচটিএমএল নয়, সুতরাং এটি আপনি যা চান তার কাছাকাছি হবে: কোনও অতিরিক্ত মার্কআপ নেই ।
একটি ব্লককোটিতে, নীচের উদাহরণটি শিরোনাম এবং উত্স লিঙ্ক উভয়ই প্রদর্শন করে এবং দুটিকে একটি ক্যারেজ রিটার্ন দিয়ে আলাদা করে ( "\a"):
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}display:flexএবং তাই এই প্রসঙ্গে হ্যাক)। এটি অভিনব নয়, সত্যই, কেবল একটি আধুনিক কৌশল। আপনি যদি ঠিক একই মার্কআপটি চান তবে আসলে ভিন্নভাবে প্রতিক্রিয়া জানাতে হবে।
"- সাধারণ উদ্ধৃতি ব্যবহার করবেন না 'কারণ আপনি \aএকটি বিশেষ চরিত্র হিসাবে পার্স করার অনুমতি দিতে চান ।
সিএসএসে কোডটি ব্যবহার করুন
p {
white-space: pre-line;
}এই কোডটি দিয়ে CSS ট্যাগের সাথে পি ট্যাগের ভিতরে প্রবেশ করা এইচটিএমএল-এ একটি ব্রেক-লাইন হবে।
আগে যা বলা হয়েছিল তা নিয়ে বিল্ডিং, এটি খাঁটি সিএসএস সমাধান যা কাজ করে।
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>input type='text', wrapping the input, and then laying the text over it with a wrapper ডিভ . That also requires পয়েন্টার-ইভেন্টগুলির জন্য সহায়ক হতে আমি এই পদ্ধতির মধ্যে একটি প্রকরণ পেয়েছি : কোনওটি নয় ` :beforeযাতে নীচের বোতামটি এখনও ক্লিক করতে সক্ষম হতে পারে।
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------অথবা
<div style="white-space:pre"> <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div> <-----------------------------------কোনও এলিমেন্টের পরে লাইন বিরতি তৈরি করতে, এটি নির্ধারণ করুন:
display:block;
ব্লক স্তরের উপাদানের পরে অ-তরল উপাদানগুলি পরবর্তী লাইনে উপস্থিত হবে। <p> এবং <ডিভি> এর মতো অনেক উপাদান ইতিমধ্যে ব্লক স্তর উপাদান রয়েছে যাতে আপনি কেবল সেগুলি ব্যবহার করতে পারেন।
তবে এটি জেনে রাখা ভাল, এটি আপনার সামগ্রীর প্রসঙ্গে নির্ভর করে। আপনার উদাহরণে, আপনি কোনও লাইন বিরতিতে বাধ্য করতে CSS ব্যবহার করতে চাইবেন না। <br /> উপযুক্ত কারণ শব্দার্থকভাবে আপনি যে পাঠ্যটি প্রদর্শন করছেন তার জন্য p ট্যাগ সবচেয়ে উপযুক্ত। কেবল সিএসএস বন্ধ রাখতে আরও মার্কআপ অপ্রয়োজনীয়। প্রযুক্তিগতভাবে এটি হুবহু অনুচ্ছেদে নয়, তবে কোনও <গ্রিটিটিং> ট্যাগ নেই, তাই আপনার যা আছে তা ব্যবহার করুন। HTML সঙ্গে ভাল আপনার বিষয়বস্তু বর্ণনা পথ আরো গুরুত্বপূর্ণ - পরে আপনি আছে তারপর জিনিসটা এটা প্রশংসনীয় বানাতে কিভাবে।
এখানে একটি খারাপ প্রশ্নের খারাপ সমাধান দেওয়া হয়েছে, তবে একটি যা আক্ষরিকভাবে সংক্ষেপে পূরণ করে:
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}exউচিত? pএবং eকীবোর্ডের খুব কাছাকাছি নয়, সে কারণেই আমি জিজ্ঞাসা করছি
অন্যান্য উত্তরগুলি পরিস্থিতির উপর নির্ভর করে লাইন ব্রেকগুলি যুক্ত করার কয়েকটি ভাল উপায় সরবরাহ করে। তবে এটি লক্ষ করা উচিত যে লিঙ্কগুলির তালিকাগুলির উপর সিএসএস নিয়ন্ত্রণের:after জন্য নির্বাচক হ'ল এটির আরও ভাল উপায় (এবং অনুরূপ জিনিস) , কারণ নীচে উল্লিখিত হয়েছে।
সামগ্রীর সারণী ধরে ধরে এখানে একটি উদাহরণ দেওয়া হয়েছে:
<style type="text/css">
.toc a:after{ content: "\a"; white-space: pre; }
</style>
<span class="toc">
<a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
<a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>এবং এখানে সাইমন_উইভারের কৌশলটি, যা সহজ এবং আরও উপযুক্ত। এটি স্টাইল এবং কন্টেন্টকে আলাদা আলাদা করে না, আরও কোডের প্রয়োজন হয় এবং এমন ঘটনাও ঘটতে পারে যেখানে আপনি সত্যের পরে ব্রেক যোগ করতে চান। তবুও দুর্দান্ত সমাধান, বিশেষত বয়স্ক আই এর জন্য।
<style type="text/css">
.toc br{ display: none; } /* comment out for horizontal links */
</style>
<span class="toc">
<a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
<a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>উপরের সমাধানগুলির সুবিধাগুলি নোট করুন:
pre )display:block মন্তব্য দেখুন)floatবা clearশৈলী<br/>, বা preহার্ড-কোডেড বিরতি সহ)a.toc:afterএবং<a class="toc">এতে একটি brট্যাগ সেট করা হচ্ছেdisplay: none করা সহায়ক, তবে তারপরে আপনি ওয়ার্ডসআরনটোওর দিয়ে শেষ করতে পারেন। পরিবর্তে এটি একটি স্থানের অক্ষর দিয়ে প্রতিস্থাপন করা আরও সহায়ক বলে মনে করেছি:
এইচটিএমএল:
<h1>
Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>সিএসএস:
@media (min-device-width: 1281px){
h1 br {content: ' ';}
h1 br:after {content: ' ';}
}brথেকে display: inline-block; width: 1em;যা যখন অনুভূমিক যাচ্ছে একসঙ্গে চালু করা থেকে শব্দ বাধা দিতে পারে।
<pre>ট্যাগ সম্পর্কে কি?
<pre>যাতে এটি লাইনটি ভেঙে যায়। আপনি যদি নিয়মিত সাদা স্থান পেতে চান?
আপনি প্রচুর প্যাডিং যুক্ত করতে এবং পাঠ্যকে নতুন লাইনে বিভক্ত করতে বাধ্য করতে পারেন, উদাহরণস্বরূপ
p{
padding-right: 50%;
}প্রতিক্রিয়াশীল ডিজাইন সহ এমন পরিস্থিতিতে আমার পক্ষে খুব ভাল কাজ করেছে, যেখানে কেবল নির্দিষ্ট প্রস্থের মধ্যেই পাঠ্যকে বিভক্ত করার প্রয়োজন হয়েছিল।
আপনার মধ্যে সামগ্রীর ঘোষণা করতে হবে <span class="class_name"></span>। এটির পরে লাইনটি বিরতি হবে।
\A লাইন ফিড অক্ষর মানে।
.class_name::after {
content: "\A";
white-space: pre;
}ভিনসেন্ট রবার্ট এবং জোয় অ্যাডামস উভয় উত্তরই বৈধ। আপনি যদি না চান তবে মার্কআপ পরিবর্তন করুন, আপনি কেবল একটি sertোকাতে পারেন<br /> জাভাস্ক্রিপ্ট ব্যবহার করে ।
সিএসএসে মার্কআপটি পরিবর্তন না করে এটি করার কোনও উপায় নেই।
:afterবা :beforeকরতে পারে ।
যদি এটি কাউকে সহায়তা করে ...
আপনি এটি করতে পারেন:
<p>This is an <a class="on-new-line">inline link</a>?</p>এই সিএসএস সহ:
a.on-new-line:before {
content: ' ';
font-size:0;
display:block;
line-height:0;
}.on-new-line:before {content: ""; display: block;}
এটি ক্রোমে কাজ করে:
p::after {
content: "-";
color: transparent;
display: block;
}আমি অনুমান করছি আপনি ব্রেক ব্রেকপয়েন্ট ব্যবহার করতে চান নি কারণ এটি সর্বদা লাইনটি ভঙ্গ করবে। এটা কি ঠিক? যদি তাই হয় কিভাবে <br />আপনার পাঠ্যটিতে একটি ব্রেকপয়েন্ট যুক্ত করা যায় , তারপরে এটির মতো একটি শ্রেণি প্রদান করা হলে <br class="hidebreak"/>মিডিয়া ক্যোয়ারীটি আপনি যে আকারটি ছুঁতে চান তার ঠিক উপরে ভাঙতে চান<br /> এটি নির্দিষ্ট প্রস্থে ভেঙে যায় তবে width প্রস্থের উপরে ইনলাইন থাকে।
এইচটিএমএল:
<p>
The below line breaks at 766px.
</p>
<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>সিএসএস:
@media (min-width: 767px) {
br.hidebreak {display:none;}
}"Tip: The <br> tag is useful for writing addresses or poems."
কোডটি হতে পারে
<div class="text-class"><span>hello</span><span>How are you</span></div>সিএসএস হবে
.text-class {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}না। আপনি যদি হার্ড লাইন বিরতি চান, একটি ব্যবহার করুন।
display: block;।
<br />উপাদানটি খুব ভাল কারণে উপস্থিত রয়েছে। যদি আপনি লাইন ব্রেকটি চান কারণ সেগুলি পৃথক অনুচ্ছেদ, তবে কেবল তাদের পৃথক অনুচ্ছেদ হিসাবে চিহ্নিত করুন।