CSS ব্যবহার করে কোনও এলিমেন্টের আগে একটি লাইন ব্রেক কীভাবে সন্নিবেশ করা যায়

Question

আমি মনে করি যে কোনও উপাদানগুলির আগে লাইন ব্রেক ব্রেক সন্নিবেশ করানোর জন্য আমি CSS সামগ্রী সামগ্রীটি ব্যবহার করে কোনও উপায় দেখেছি। স্পষ্টতই এটি কাজ করে না:

#restart:before { content: '<br/>'; }

কিন্তু আপনি এই কিভাবে করবেন?

Comments

সিএসএস সামগ্রী যুক্ত বা সম্পাদনা করার জন্য নয়, এটি কীভাবে সামগ্রী প্রদর্শিত হয় তা নিয়ন্ত্রণ করার জন্য।

— টড মূসা

আমার কাছে মনে হয় লেআউট এবং প্রবাহ (লাইন ব্রেকগুলি বিবেচনা করা যেতে পারে) অবশ্যই CSS এর ডোমেনের মধ্যে রয়েছে।

— ট্রেভর

সিএসএস হয় একেবারে যোগ করে অথবা সম্পাদনা বিষয়বস্তু যখন এটি একটি সামঞ্জস্যপূর্ণ স্টাইলিং উপাদান যে আপনার থিম এর একটি অংশ জন্য। বিশেষত ওয়ার্ডপ্রেসের মতো সামগ্রী পরিচালনা ব্যবস্থা যা আপনাকে আপনার সামগ্রী সম্পাদনা করতে দেয় না এটি অত্যন্ত কার্যকর। এজন্য "সামগ্রী" সম্পত্তি বিদ্যমান। যোগ করতে এবং / অথবা সামগ্রী সম্পাদনা করার জন্য।

— ফি লরেন

Answer 1

এটি Psuedo- উপাদান উত্পাদিত সামগ্রীতে \A পালানোর ক্রম ব্যবহার করে সম্ভব । সিএসএস 2 অনুচ্ছেদে আরও পড়ুন ।

#restart:before { content: '\A'; }

আপনারও যোগ white-space:pre;করার প্রয়োজন হতে পারে #restart।

দ্রষ্টব্য: \Aএকটি রেখার শেষ নির্দেশ করে।

পিএস আরেকটি চিকিত্সা হতে হবে

:before { content: ' '; display: block; }

Comments

এছাড়াও সাদা-স্থান চেষ্টা করুন: প্রাক-মোড়ানো; আপনি যদি চান আপনার পাঠ্য মোড়ানো।

— জাজি

উজ্জ্বল। তবে এটি লক্ষ করা উচিত, এটি কাজ করার জন্য - #restartএটিও হওয়া আবশ্যকdisplay: inline;

— ট্রয় অ্যালফোর্ড

এটি আমার পক্ষে কাজ করে না, আমি :before { content: ' '; display: block; }পরিবর্তে ব্যবহার করেছি ।

— বোগদানিও

কোনও কারণে সমাধানগুলির inline-blockকোনওটিই উপাদানগুলির সাথে কাজ করে না। তারা কেবল পরবর্তী লাইনে যাবে না। কেবলমাত্র সমাধানটি হ'ল <div></div>এইচটিএমএলে একটি খালি যুক্ত করা ।

— অ্যাডাম রেইস

যদি লাইনটি না ভাঙে, আপনি 'সাদা-স্থান' সম্পত্তিটি ব্যবহার করতে পারেন: {সামগ্রীর আগে: '\ এ'; সাদা-স্থান: প্রাক; }

— আমির

Answer 2

যদি #restartকোনও ইনলাইন উপাদান (যেমন <span>, <em>ইত্যাদি) হয় তবে আপনি এটি ব্যবহার করে এটি একটি ব্লক উপাদানতে রূপান্তর করতে পারেন:

#restart { display: block; }

এটির উপাদানটির আগে এবং পরে উভয় ক্ষেত্রেই একটি লাইন বিরতি নিশ্চিত করার প্রভাব ফেলবে।

সিএসএস এমন কিছু প্রবেশ করার উপায় নেই যা কেবলমাত্র কোনও এলিমেন্টের আগে লাইন ব্রেকের মতো কাজ করে এবং তার পরে না not আপনি সম্ভবত অন্যান্য পরিবর্তনগুলির পার্শ্ব-প্রতিক্রিয়া হিসাবে উদাহরণস্বরূপ float: left, বা clear: leftভাসমান উপাদানগুলির পরে বা এমন কিছু পাগল হওয়ার পরেও সম্ভবত লাইন-ব্রেকের কারণ হতে পারেন #restart:before { content: 'a load of non-breaking spaces'; }তবে সাধারণ ক্ষেত্রে এটি সম্ভবত ভাল ধারণা নয়।

Comments

এটি প্রদর্শন করা যায় না: ব্লক - কারণ তখন পৃষ্ঠার সমস্ত প্রান্তটি চালিয়ে যাওয়া উপাদানটিকে ব্যাকগ্রাউন্ড রাখতে আমার উপাদানটির প্রস্থ প্রদর্শন করতে হবে। উপাদানটির জন্য প্রস্থটি স্বয়ংক্রিয়ভাবে সেট করতে সক্ষম হওয়া দরকার।

— মায়াভারগুলি

একটি float: leftউপাদান কিছুটা কাজে লাগতে পারে, কারণ এটি সংকুচিত থেকে ফিট হয়ে যায় এবং একটি নতুন লাইনে শুরু হয়। অন্যথায়, আপনি যা চান তা সম্ভব নাও হতে পারে।

— বোবিনস

ডাউনভোটেড কারণগুলি কখনও কখনও বিকাশকারীরা একটি বড় প্রকল্পে কাজ করে যেখানে তাদের নিয়ন্ত্রণ নেই বা অন্য সমাধান প্রয়োগের সিদ্ধান্ত নিতে পারে না।

— eyurdul

Answer 3

এটি আমার পক্ষে কাজ করে:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

Comments

কোনও কারণে, নতুন লাইনের বিভিন্ন ইউনিকোড চরিত্রগুলি আমার পক্ষে কাজ করছে না ..? এই সমাধানটি যদিও কৌশলটি করেছে - ধন্যবাদ!

— জিন বো বো

হ্যাঁ, তবে আপনাকে যখন সামগ্রীটির ভিতরেও পাঠ্য লিখতে হয় তখন কী হয় !? উত্তর

— সানডোর জুবোলি

Answer 4

কেবলমাত্র সিউডো এলিমেন্টের মধ্যে একটি ইউনিকোড নিউলাইন অক্ষর রাখুন:

#restart:before { content: '\00000A'; }

Answer 5

নিম্নলিখিত সিএসএস আমার জন্য কাজ করেছে:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

Comments

প্লেইন সিএসএস সহ দুর্দান্ত ধারণা

— নবীনদা

আমার জন্য একটি কবজ হিসাবে কাজ। আমি এটি ব্যবহার করছি:content: 'bar: \a' attr(data-description);

— জিমি আদারো

এটি সঠিক উত্তর 👍

— ক্রোনোকলি

Answer 6

আপনি যেভাবে চান সিএসএসের মাধ্যমে উত্পাদিত সামগ্রী যুক্ত করতে না পারার দুটি কারণ রয়েছে:

1. উত্পন্ন সামগ্রী কনটেন্ট গ্রহণ করে এবং মার্কআপ নয়। মার্কআপ মূল্যায়ন করা হবে না তবে প্রদর্শিত হবে।

2. :beforeএবং :afterউত্পন্ন সামগ্রী উপাদানটির মধ্যে যুক্ত করা হয়, তাই এমনকি কোনও স্থান বা চিঠি যুক্ত করে এটি নির্ধারণ করে যা কার্যকর blockহবে না।

একটি ::outsideসিউডো উপাদান রয়েছে যা আপনি যা চান তা করতে পারে। তবে ব্রাউজার সমর্থন নেই বলে মনে হচ্ছে। (এখানে আরও পড়ুন: http://www.w3.org/TR/css3-content/# র‍্যাপিং )

সেরা বাজি এখানে কিছুটা jQuery ব্যবহার করা হয়:

$('<br />').insertBefore('#restart');

উদাহরণ: http://jsfiddle.net/jasongennaro/sJGH9/1/

Comments

"সিএসএস ব্যবহার করে"। আমি জেসি কিনসম্যানের কাজের মতো একটি উত্তর পেয়েছি।

— রনিকনক্সভিল

Answer 7

হ্যাঁ, সম্পূর্ণ করণীয় তবে এটি অবশ্যই একটি সম্পূর্ণ হ্যাক (লোকেরা আপনাকে এই জাতীয় কোড লেখার জন্য নোংরা চেহারা দিতে পারে)।

এইচটিএমএল:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

এখানে সিএসএস:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

এখানে হৈচৈ পড়েছে: http://jsfiddle.net/AprNY/

Comments

সৃজনশীলতার জন্য +1। আমি এমন কিছু পেয়েছি যা আমি একটি বাহ্যিক উত্স থেকে অন্তর্ভুক্ত করছি এবং প্রকৃত এইচটিএমএলকে পরিবর্তন করতে পারি না ... এটি ঠিক কাজ করে বলে মনে হচ্ছে :) ধন্যবাদ!

— counterbeing

Answer 8

নিম্নলিখিত চেষ্টা করুন:

#restart::before {
  content: '';
  display: block;
}

Comments

একটি টিপ: কমপক্ষে একটি লাইনারের মন্তব্য যুক্ত করুন, যাতে আপনার পোস্টগুলি ডিফল্টরূপে ভিএলকিউতে শেষ না হয়।

— উত্সাহক

Answer 9

আপনি ধরে নিচ্ছেন লাইনটির উচ্চতা 20 পিক্স হতে হবে

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

Answer 10

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

এইচটিএমএল

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

সিএসএস

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

আশাকরি এটা সাহায্য করবে.

Answer 11

আপনি <br>ট্যাগ সহ আপনার দস্তাবেজটি পপুলেট করতে পারেন এবং সিএসএস-সহ অন্যদের মতোই চালু করতে পারেন:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

Answer 12

আপনি 
আপনার সামগ্রীতে লাইন বিরতির জন্য প্রাক-এনকোডড এইচটিএমএল সত্তাও ব্যবহার করতে পারেন এবং এটির একই প্রভাব থাকবে।

Answer 13

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 কন্টেন্ট প্রোয়ের্টি, "নিউলাইনস" ... পি প্যারেন্ট ব্লকের ভিতরে পি মার্জিন বা প্যাড যুক্ত করবে না (যেমন, বডি ›বিভাগ› P)। "\ A" লাইন বিরতি লাইন স্পেস, সমতুল্য স্টাইলযুক্ত লাইন-উচ্চতাকে বাধ্য করে।

Answer 14

একটি যোগ করুন margin-top:20px;থেকে #restart। অথবা আপনি যে আকারের ফাঁক অনুভব করেন তা যথাযথ। যদি এটি কোনও ইনলাইন উপাদান থাকে তবে আপনাকে যুক্ত করতে হবে display:blockবা display:inline-blockযদিও আমি মনে করি না যে inline-blockIE এর পুরানো সংস্করণে কাজ করে।

Comments

কোনও সমস্যা হ'ল উপাদানটির প্রদর্শন প্রকারটি ইনলাইন-ব্লক, সুতরাং উপাদানটির আগে আমার বিরতি থাকা দরকার।

— মায়াভারগুলি

প্রদর্শনের ধরণটি ইতিমধ্যে ইনলাইন-ব্লক। আমি সামগ্রীর সম্পত্তি ব্যবহার করে উপরে যা চেয়েছি তা করার চেষ্টা করছি trying

— মায়াভারগুলি

আপনি সামগ্রীর সম্পত্তি ব্যবহার করে এইচটিএমএল উপাদান যুক্ত করতে পারবেন না, এটি সম্ভব নয়।

— punkrockbuddyholly

কারণ আপনার উত্তরটি তার সমস্যার সমাধান করতে পারত না। বিজয়ী উত্তরটি দেখুন যা সামগ্রীর সম্পত্তি (যা এইচটিএমএল উপাদানগুলি গ্রহণ করবে না) ব্যবহার করে লাইন ব্রেক সরবরাহ করার উপায়ের বিবরণ দেয়। সম্ভবত এটি মূল প্রশ্নের ভুল বোঝাবুঝি ছিল।

— পিডওয়াকার

Answer 15

কোনওভাবে ম্যানুয়ালি একটি লাইন বিরতি যুক্ত করার পরিবর্তে, আপনি প্রয়োগ করতে পারবেন border-bottom: 1px solid #ff0000যা উপাদানটির সীমানা গ্রহণ করবে এবং border-<side>আপনি যে কোনও পক্ষকে নির্দিষ্ট করবেন re

Comments

ওপি সমীকরণের জন্য বলেছে <br>, না <hr>।

— বেনি চেরনিয়াভস্কি-পাসকিন