সিএসএস সামগ্রী ব্যবহার করে এইচটিএমএল সত্তা যুক্ত করা হচ্ছে

Question

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

এই জাতীয় কিছু ব্যবহার করে কেবল  অ-ব্রেকিং স্পেসের পরিবর্তে স্ক্রিনে প্রিন্ট করে:

.breadcrumbs a:before {
    content: ' ';
}

Comments

অন্য অর্থে, CSS ব্যবহার করে সামগ্রী যুক্ত করা উদ্বেগের বিভাজন লঙ্ঘন করে, CSS কেবল স্টাইল সংজ্ঞাগুলির জন্য বোঝানো হয়। সিএসএস স্ক্রুগুলি পুরো মার্ক আপকে অক্ষম করার কারণে অ্যাক্সেসযোগ্যতার দৃষ্টিকোণ থেকে এড়ানো ভাল। তবে এই কৌশলটি ব্যবহার করে চিত্রগুলি যুক্ত করা ভাল to

— কোয়েস্টজেন

এটা নির্ভর করে. এক্ষেত্রে এটি উপস্থাপনের উদ্দেশ্যে। এটি এইচটিএমএলে ">" লাগাতে "এসসিসি" লঙ্ঘন করবে

— ম্যাথিউ

কেবল একটি প্রশ্ন, আপনি কি মনে করেন যে অর্ডারযুক্ত তালিকা হিসাবে আরও ভাল থাকবেন? মানে, এটি একটি অর্ডার সহ একটি তালিকা তাই না?

— অ্যালেক্স

@ কোয়েস্টজেন - আমি মনে করি যে সিএসএস :afterসেট করতে সিএসএস ব্যবহার করা পুরোপুরি গ্রহণযোগ্য (এবং ভাল ফর্ম) , যেমন একটি বাছাই করা কলামে asc / desc সাজানোর সূচক।

— জোশ এম

আমি লক্ষ্য করেছি যে মানুষ এসসির নীতি সম্পর্কে পাগল হয়ে গেছে। স্বর্গ, আপনার জন্য ">" কী ধরণের বিষয়বস্তু? দয়া! এটি এই প্রসঙ্গে কেবল একটি আইকন, একটি উইজেট, একটি বুলেট, আপনি এটির নাম দিন। আমার কাছে বিষয়বস্তু এমন একটি বিষয় যা আমি অনুসন্ধানযোগ্য হতে চাই।

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

Answer 1

আপনাকে পালানো ইউনিকোড ব্যবহার করতে হবে:

মত

.breadcrumbs a:before {
    content: '\0000a0';
}

আরও তথ্যে: http://www.evotech.net/blog/2007/04/ নাম-html-entities-in-numeric-order/

Comments

নেতৃস্থানীয় শূন্যগুলি অনাবৃত, CSS 2.1: 4.3.7 স্ট্রিংগুলি দেখুন । '>\a0'আল্লাহই যথেষ্ট।

— তারিখ

@ ড্লেলব্লিন আরও জানান, পালানোর ক্রমের অংশ হিসাবে অক্ষরগুলি নির্ভরযোগ্যভাবে ব্যাখ্যা করা থেকে বাঁচতে স্ট্যান্ডার্ড হোয়াইট-স্পেস যুক্ত করুন: '>\a0 bc'প্রদর্শিত হবে > bc।

— তারিখ

আমার সরঞ্জামটি amp- কি.com / #q=%3E একটি "সিএসএস" মোড সরবরাহ করে। পৃষ্ঠার নীচে "সিএসএস" চয়ন করুন। উপরের সিএসএসের রেফারেন্স অনুযায়ী, এগুলি স্পষ্ট না হলে স্থানগুলি সীমান্ত করা উচিত।

— এনডিপি

@ ম্যাথিউ আপনি কি পরিবর্তে চিত্র যুক্ত করতে 'সামগ্রী' ব্যবহার করতে পারেন? কেবল ভাবছি

— ওয়েইয়া ডিজাইন 14

@ অ্যাডাম, না, আপনি যদি কোনও চিত্র সংযোজন করতে চান, "ব্যাকগ্রাউন্ড-চিত্র" ব্যবহার করুন এবং প্রদর্শন করুন: ইনলাইন-ব্লক; এবং প্রস্থ: 123px; উচ্চতা: 123px; (সঠিক প্রস্থ / উচ্চতা ব্যবহার করুন)

— নাথান জেবি

Answer 2

সিএসএস এইচটিএমএল নয়। এইচটিএমএলে  একটি নামযুক্ত চরিত্রের রেফারেন্স ; দশমিক সংখ্যাযুক্ত অক্ষর রেফারেন্সের সমান  । 160 দশমিক হয় কোড বিন্দু এর NO-BREAK SPACEচরিত্রের ইউনিকোড (অথবা UCS-2 দেখ এইচটিএমএল 4.01 স্পেসিফিকেশন )। এই কোড পয়েন্টটির হেক্সাডেসিমাল উপস্থাপনা হ'ল ইউ + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ )। আপনি এটি ইউনিকোড কোড চার্ট এবং চরিত্রের ডেটাবেজে পাবেন ।

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

.breadcrumbs a:before {
  content: '\a0';
}

এটি যতক্ষণ অব্যাহতি ক্রমটি স্ট্রিংয়ের মানতে শেষ হয় ততক্ষণ কাজ করে। যদি অক্ষরগুলি অনুসরণ করে তবে ভুল ব্যাখ্যাটি এড়াতে দুটি উপায় রয়েছে:

ক) (অন্যদের দ্বারা উল্লিখিত) অব্যাহতি ক্রমের জন্য সঠিকভাবে ছয়টি হেক্সাডেসিমাল সংখ্যা ব্যবহার করুন:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

খ) পালানোর ক্রমের পরে একটি সাদা স্থান (উদাহরণস্বরূপ, স্থান) অক্ষর যুক্ত করুন:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(যেহেতু fএকটি হেক্সাডেসিমাল অঙ্ক, \a0fঅন্যথায় GURMUKHI LETTER EEএখানে অর্থ বোঝানো হবে , বা যদি আপনার উপযুক্ত ফন্ট থাকে))

সীমাবদ্ধ সাদা-স্থান উপেক্ষা করা হবে এবং এটি প্রদর্শিত হবে  foo, যেখানে এখানে প্রদর্শিত স্থানটি একটি NO-BREAK SPACEঅক্ষর হবে।

শ্বেত-স্থান পদ্ধতির ( '\a0 foo') ছয়-অঙ্কের পদ্ধতির ( '\0000a0foo') থেকে নিম্নলিখিত সুবিধা রয়েছে :

• এটি টাইপ করা সহজ , কারণ নেতৃস্থানীয় শূন্যগুলি প্রয়োজন হয় না, এবং অঙ্কগুলি গণনা করার প্রয়োজন হয় না;
• এটি পড়া সহজ , কারণ পালানোর ক্রম এবং নিম্নলিখিত পাঠ্যের মধ্যে সাদা স্থান রয়েছে এবং অঙ্কগুলি গণনা করার প্রয়োজন নেই;
• এর জন্য কম স্থান প্রয়োজন , কারণ নেতৃস্থানীয় শূন্যগুলি প্রয়োজন হয় না;
• এটি উপরের দিকে সামঞ্জস্যপূর্ণ , কারণ ইউনিকোড সাপোর্টিং কোড পয়েন্টগুলিতে ভবিষ্যতে ইউ + 10 এফএফএফএফ ছাড়িয়ে সিএসএস স্পেসিফিকেশন পরিবর্তন করতে হবে require

সুতরাং, একটি পালিয়ে যাওয়া চরিত্রের পরে কোনও স্থান প্রদর্শন করতে, স্টাইলশিটে দুটি স্পেস ব্যবহার করুন -

.breadcrumbs a:before {
  content: '\a0  foo';
}

- বা এটিকে স্পষ্ট করে দিন:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

দেখুন সিএসএস 2.1, বিভাগ "4.1.3 অক্ষর এবং কেস" বিস্তারিত জানার জন্য।

Comments

"একটি পালিয়ে যাওয়া চরিত্রের পরে একটি স্থান প্রদর্শন করতে" ট্রিকের জন্য +1, তবে উল্লেখ করতে হবে যে একটি

— এনএসপি

@TWiStErRob No, ব্রেকিং স্পেস অক্ষর (বা তদ্বিপরীত) এর পরে নন-ব্রেকিং স্পেস ক্যারেক্টারের সংমিশ্রণ দুটি স্থানের অক্ষরের প্রস্থ সম্পর্কে একটি ফাঁক প্রদর্শন করবে , যখন দুই বা ততোধিক ভার্ব্যাটিম স্পেস অক্ষর কেবল একটি ফাঁক প্রদর্শন করবে লেআউট ইঞ্জিনের পার্সার হিসাবে একটি স্পেস অক্ষরের প্রস্থ ক্রমাগত ব্রেকিং হোয়াইটস্পেস (নতুন লাইন সহ) এক স্পেস অক্ষরে পরিণত হয় যদি না white-spaceসিএসএস সম্পত্তি অন্যথায় ঘোষণা করে।

— পয়েন্টড ইয়ারস

হ্যাঁ, ভেঙে পড়ার বিষয়ে আমি জানি, তবে এনপিএসের মূল বক্তব্যটি হ'ল এটি অবিচ্ছিন্ন, শব্দের বর্ণগুলিও ডিফল্টরূপে অ-ব্রেকিং হয়, সুতরাং অবিচ্ছিন্ন ব্যক্তির পাশে একটি ব্রেকিং স্পেস যুক্ত করা কোনও অর্থ দেয় না, শেষ ফলাফলটি হবে ভাঙা। আমি কথা বলছি white-space: normal।

— TWiStErRob

@TWiStErRob দয়া করে আমার উত্তরটি আরও মনোযোগ সহকারে পড়ুন। এটি "পালানো চরিত্রের পরে কোনও স্থান প্রদর্শনের জন্য [আইএনজি]" এর উদাহরণ । মূল কোডটিতে একটি NO-BREAK SPACEচরিত্র ছিল , তাই আমি এটির জন্য পালানোর ক্রমটি ব্যবহার করেছি। আপনি অন্য কোনও অব্যাহতি ক্রম চয়ন করতে পারেন; যদি প্রয়োজন হয়, আপনি ঘোষণা করতে পারেন white-space: nowrap।

— পয়েন্টেডআর

Answer 3

আপডেট : পেইন্ডইয়ারস উল্লেখ করেছেন যে  সমস্ত সিএসএস পরিস্থিতিতে সঠিক অবস্থানটি
'\a0 'বোঝায় যে স্থানটি হেক্স স্ট্রিংয়ের একটি টার্মিনেটর এবং পালানো ক্রম দ্বারা শোষিত হয়েছে। তিনি এই অনুমোদনমূলক বিবরণটির আরও উল্লেখ করেছেন যা আমার বর্ণিত সমস্যার নীচে সমাধান এবং নীচে ঠিক করা বলে মনে হচ্ছে।

আপনার যা করা দরকার তা হ'ল পালানো ইউনিকোড। আপনাকে যা বলা হয়েছে তা সত্ত্বেও সিএসএসের মধ্যে \00a0উপযুক্ত অবস্থান নয়  ; সুতরাং চেষ্টা কর:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

বিশেষত \0000a0হিসাবে হিসাবে ব্যবহার  । আপনি যদি চেষ্টা করেন তবে ম্যাথিউ এবং মিলিকিনের পরামর্শ অনুসারে:

content:'No\00a0Break'   /* becomes No਋reak */

এটি বিটিকে হেক্স পলায়নের চরিত্রগুলিতে নিয়ে যায়। 0-9a-fA-F এর সাথে একই ঘটে।

Comments

আপনি শুধু উল্লিখিত, পালাবার ক্রম পরে একটি স্পেস করা প্রয়োজন: '\a0 Break'। '\0000a0Break'হয় না নির্ভরযোগ্য।

— তারিখ

@ পেইন্ডইয়ার্স আকর্ষণীয়, তাই তাহলে এই স্থানটি একটি টার্মিনেটর এবং স্ট্রিংটিতে অন্তর্ভুক্ত হয় না?

— dlamblin

দেখুন সিএসএস 2.1, বিভাগ "4.1.3 অক্ষর এবং কেস" । যা এও দেখায় যে আপনার পদ্ধতির প্রতি সিএসএস ২.১ অনুযায়ী নির্ভরযোগ্য হওয়া উচিত। তবে আমি হোয়াইটস্পেস অ্যাপ্রোচ ক্লিনার (উপরের দিকে সামঞ্জস্যপূর্ণ) এবং একটি ছোট পায়ের ছাপ রেখেছি।

— নির্ধারিত বছর

Answer 4

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

আমি দেখতে পেয়েছি যে প্রতীককে তাদের হেক্সাডেসিমাল সমতুল্যে রূপান্তরিত করার সহজতম উপায় হ'ল মাইক্রোসফ্ট ক্যালকুলেটর ব্যবহার করা ▾ ( ▾) থেকে \25BE=)

হ্যাঁ. প্রোগ্রামার মোড সক্ষম করুন, দশমিক সিস্টেম চালু করুন, প্রবেশ করুন 9662, তারপরে হেক্সে স্যুইচ করুন এবং আপনি পাবেন 25BE। তারপরে \শুরুতে একটি ব্যাকস্ল্যাশ যুক্ত করুন ।

Comments

সম্পূর্ণরূপে দরকারী হলেও এটি প্রশ্নের উত্তর দেয় না, সুতরাং প্রশ্নের মন্তব্য হিসাবে এটি আরও ভাল।

— dlamblin

কালো ডানদিকে দেখানো ছোট তীর (▸ \25B8 ▸ ▸) ftw। এছাড়াও, আরও জন্য en.wikedia.org/wiki/ জ্যামিতিক_শ্যাপগুলি দেখুন _S

— জোয়েল পুররা

2 জোয়েল পুররা, আরও সময় উইকি পড়ুন। আপনি প্রতীক ভুল।

— নেটগোব্লিন

@ নেটগোব্লিন: কীভাবে? আমি ঠিক কালো ডান দিকের ছোট তীরটি পছন্দ করতে চাই।

— জোয়েল পুররা

আমি এই গ্রাফেমিকা ডট কম ব্যবহার করি যেখানে আপনি ডেসিমাল, হেক্সাডেসিমেল এবং আরও কিছু পেতে পারেন

— মাইক

Answer 5

একটি বিরতিহীন স্থানের জন্য হেক্স কোড ব্যবহার করুন। এটার মতো কিছু:

.breadcrumbs a:before {
    content: '>\00a0';
}

Answer 6

একটি পেস্ট করার জন্য একটি উপায় নেই nbspখোলা CharMap এবং কপি - চরিত্র 160 । যাইহোক, এই ক্ষেত্রে আমি সম্ভবত এটি প্যাডিং সহ এটিকে ফাঁকা করে রাখব:

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

display:inline-blockযদিও আপনাকে ব্রেডক্রামগুলি বা কিছু সেট করতে হবে ।

Comments

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

— নিকফ

অন্যদিকে, আপনি ব্রেডক্রাম্বগুলি যেমনটি মনে করা হচ্ছে তেমন করবেন না, যেমন:> চিহ্নটি ব্রেডক্র্যাম্বের সাথে ইনলাইন হওয়া উচিত, এবং কেবল একটি ভিজ্যুয়াল স্টাইল নয়। কমপক্ষে আপনি যদি গুগলটি আপনার ব্রেডক্রামগুলি দেখতে এবং অনুসন্ধান ইঞ্জিনে আপনার তালিকার নীচে তালিকাভুক্ত করতে চান।

— ডেমেন্টিক

Answer 7

উদাহরণ স্বরূপ :

http://character-code.com/arrows-html-codes.php

উদাহরণ: আপনি আপনার অক্ষর নির্বাচন করুন চান, আমি নির্বাচিত "& # 8620" "& # x21ac" (আমরা ব্যবহার HEX মান)

.breadcrumbs a:before {
    content: '\0021ac';
}

ফলাফল: ↬

এটাই :)

Comments

আমি সামগ্রী ব্যবহার করেছি: '\ 10095'; । কিন্তু আউটপুট দেখাচ্ছে না। আইকনটির পরিবর্তে এটি আয়তক্ষেত্র দেখাচ্ছে showing

— ক্যাপিল

Answer 8

আমি জানি এটি একটি দুর্দান্ত পুরানো পোস্ট, তবে যদি ব্যবধানগুলি আপনার সমস্ত পরে থাকে তবে কেবল কেন:

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

আমি আগে এই পদ্ধতি ব্যবহার করেছি। এটি আমার পরীক্ষায় ">" এর সাথে অন্যান্য লাইনগুলিতে একেবারে জরিমানা দেয়।

Answer 9

এখানে দুটি উপায় রয়েছে:

• এইচটিএমএলে:

  <div class="ics">&#9969;</div>

এর ফলে ⛱

• সিএসএসে:

  .ics::before {content: "\9969;"}

এইচটিএমএল কোড সহ <div class="ics"></div>

এটির ফলাফল ⛱

Comments

;: সঠিক উত্তরটি .ics :: আগে { '\ 9969 বিষয়বস্তু}

— মার্কো Scarnatto