সিউডো-উপাদান সামগ্রীর আগে :: পরে বা :: লাইন বিরতি যুক্ত করুন

Question

আমার কোনও পৃষ্ঠার জন্য এইচটিএমএল বা পিএইচপি অ্যাক্সেস নেই এবং কেবল সিএসএসের মাধ্যমে সম্পাদনা করতে পারি। আমি একটি সাইটে পরিবর্তন করছেন দেখা হয়েছে করেছি মাধ্যমে পাঠ্য যুক্ত ::afterবা ::beforeসিউডো-উপাদান এবং দেখা গিয়েছে যে পালাবার ইউনিকোড যেমন আগে বা যোগ বিষয়বস্তু পর কোন space যেমন জিনিসের জন্য ব্যবহার করা উচিত।

আমি কীভাবে contentসম্পত্তিটিতে একাধিক লাইন যুক্ত করব ?

উদাহরণস্বরূপ, এইচটিএমএল ব্রেক ব্রেক লাইনের উপাদানটি কেবলমাত্র আমি কী অর্জন করতে চাই তা কল্পনা করার জন্য:

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

Comments

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

— আন্ডারস্কোর করুন

@ সামিথা হিওয়ামসাম আমি আপনার বক্তব্যের সাথে একমত হওয়ার পরে মনে হচ্ছে পোস্টারটি এমন একটি পরিস্থিতিতে নিজেকে আবিষ্কার করেছে যেখানে তারা এইচটিএমএল সম্পাদনা করতে পারে না। ছোট, সাধারণ সামগ্রী সংযোজনের জন্য, আমি দেখতে পাচ্ছি কেন এটি দরকারী / প্রয়োজনীয় হবে।

— শুকনো লং

সিএসএসের 'বিষয়বস্তু' সম্পত্তিতে নিউলাইন চরিত্রের অনুক্রমের

— cimmanon

সিএসএস ব্যবহার করে কোনও উপাদানটির আগে একটি লাইন ব্রেক কীভাবে সন্নিবেশ করা যায় তার

— ব্যবহারকারী ২

আমি আরও যুক্তি দিয়ে বলব যে লাইন ব্রেকগুলি সম্পর্কিত সামগ্রীর চেয়ে অনেক বেশি ফর্ম্যাট-সম্পর্কিত। লাইন বিরতিতে আপনি "দেখছেন" এর একমাত্র উপায় হ'ল সামগ্রীতে বিন্যাসের পরিবর্তনটি পর্যবেক্ষণ করা।

— বিচ্ছিন্ন

Answer 1

contentসম্পত্তি পদ বলে:

লেখকরা 'সামগ্রী' সম্পত্তির পরে যে কোনও একটি স্ট্রিংয়ে "\ A" অব্যাহতি ক্রম লিখে লিখিত উত্পন্ন সামগ্রীতে নিউলাইনগুলি অন্তর্ভুক্ত করতে পারেন। এই sertedোকানো লাইন বিরতি এখনও 'সাদা-স্থান' সম্পত্তি সাপেক্ষে। "স্ট্রিংস" এবং "অক্ষর এবং কেস" দেখুন "\ এ" অব্যাহতি ক্রমের আরও তথ্যের জন্য।

সুতরাং আপনি ব্যবহার করতে পারেন:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

যথেচ্ছ স্ট্রিংগুলি থেকে বেরিয়ে যাওয়ার সময়, \00000aপরিবর্তে এটি ব্যবহার করার পরামর্শ দেওয়া হয় \A, কারণ [a-f]নতুন লাইন অনুসারে যে কোনও সংখ্যা বা অক্ষর অনুপযুক্ত ফলাফল দিতে পারে :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

Comments

এক মুহুর্তের জন্য আমি "কেন \Aএবং না \n" ভেবেছিলাম - তারপরে মনে পড়ল নিউলাইনটি হল 0x0A:)

— ক্যামিলো মার্টিন

আমি মুদ্রণ মিডিয়া ক্যোয়ারী দিয়ে এটি চেষ্টা করেছি, এটি কার্যকর হয় না। এটি একটি বাগ বা এটি পূর্বনির্ধারিত আচরণ? প্রিন্ট মিডিয়া ছাড়া এটি কাজ করে।

— হ্যারিফینگ

উল্লেখ করার জন্য ধন্যবাদ pre-wrap! #headerAgentInfoDetailsPhone ক্রিমের মতো ব্লিঙ্ক ইঞ্জিন ওয়েব ব্রাউজারগুলিতে আর মোড় না দেওয়ার ক্ষেত্রে আমার সমস্যা ছিল । ফায়ারফক্স তত্সড় white-space: pre;উপাদানগুলিতে ফিরে সম্পত্তি প্রচার করতে সংবেদনশীল নয় ।

— সার্জ স্ট্রোব্যান্ড ২

Answer 2

বেসিকগুলি ব্যাখ্যা করার জন্য দুর্দান্ত নিবন্ধ (তবে লাইন ব্রেকগুলি কভার করে না)।

পুরো আশ্চর্যজনক স্টাফ সিউডো এলিমেন্টগুলি করতে পারে unch

আপনার যদি দুটি ইনলাইন উপাদান থাকা প্রয়োজন যেখানে একটি অন্য লাইনের মধ্যে পরবর্তী লাইনে বিভক্ত হয়, আপনি সিউডো উপাদান যুক্ত করে এটি সম্পাদন করতে পারেন: সামগ্রী সহ: '\ এ' এবং সাদা-স্থান: প্রাক

এইচটিএমএল

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

সিএসএস

.label:after {
    content: '\A';
    white-space: pre;
}

Answer 3

আমার একটি টুলটিপে নতুন লাইন থাকতে হয়েছিল। আমার এই পরে এই সিএসএস যুক্ত করতে হয়েছিল: পরে:

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

শব্দ মোড়ানো প্রয়োজন বলে মনে হচ্ছে।

তদ্ব্যতীত, একটি নতুন লাইন জোর করে প্রদর্শন করতে পাঠ্যের মাঝখানে \ A কাজ করে না।

 
 

কাজ করছে. আমি তখন এই জাতীয় সরঞ্জামটি পেতে সক্ষম হয়েছি:

Answer 4

আপনি এটি চেষ্টা করতে পারেন

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

জেএস ফিডল

Answer 5

এমন লোকদের জন্য যারা 'সিউডো এলিমেন্টে ডায়নামিকভাবে কীভাবে বিষয়বস্তু পরিবর্তন করতে হবে নতুন লাইন চিহ্নটি যুক্ত করবে "এখানে এই উত্তরটি দেওয়া হবে

এইচটিএমএল 
চরিত্রগুলি জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল এগুলি যুক্ত করে কাজ করবে না কারণ এই অক্ষরগুলি নথির রেন্ডারে পরিবর্তিত হয়েছে

পরিবর্তে আপনার এই অক্ষরগুলির ইউনিকোড উপস্থাপনাটি সন্ধান করতে হবে যা U + 000D এবং U + 000A হয় তাই আমরা এর মতো কিছু করতে পারি

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

<div text='I want to break it in javascript, after comma sign'></div> 

আশা করি এটি কারওর সময় সাশ্রয় করবে, শুভকামা :)

Answer 6

লাইন ব্রেক ::afterবা ::beforeসিউডো-উপাদান সামগ্রীতে যুক্ত করুন

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

Answer 7

এখানে এই প্রশ্নটি পাওয়া গেছে যা একই জিনিসটিকে জিজ্ঞাসা করে বলে মনে হচ্ছে: সিএসএসের 'সামগ্রী' সম্পত্তিতে নিউলাইন চরিত্রের অনুক্রম?

দেখে মনে হচ্ছে আপনি ব্যবহার করতে পারেন \Aবা \00000aঅর্জন করতে পারেনnewline

Answer 8

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

.Mbr এবং .dbr শ্রেণীর সিএসএস ব্যবহার করে লাইন বিরতি আচরণ অনুকরণ করতে প্রদর্শন: টেবিল । আপনি যদি সত্যিকারের <br /> প্রতিস্থাপন করতে চান তবে দরকারী।

: এই নমুনা Codepen পরীক্ষা করে দেখুন https://codepen.io/Marko36/pen/RBweYY ,
এবং প্রতিক্রিয়াশীল সাইটে ব্যবহারের উপর এই পোস্টে: প্রদত্ত ব্রেকপয়েন্ট এ অনুকরণ <br />: প্রতিক্রিয়াশীল লাইন বিরতি ।